Question

我想使用切换按钮显示/隐藏容器（请参见下面的代码）。它成功为第一次点击添加了容器，但是在第二次点击之后无法正确删除。有人知道这是什么问题吗？

let toggle_button = $('#toggle-btn');
let button_container = $('#button-container');

toggle_button.on('click', function (event) {

  event.stopPropagation();
  
  let container = get_container();
  toggle_button.toggleClass('toggled');
  
  if (toggle_button.hasClass('toggled')) {
    button_container.after(container);
  } else {
    container.remove();
  }
  
});


function get_container ()
{
  return $('<div/>').css({ 
    width: '100%', height: 'auto', 
    background: 'yellow' 
  }).html('container');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button-container" style="width:100%;height:auto;background:#000;">
  <button id="toggle-btn">Toggle Button</button>
</div>

Answer 1

您可以将remove与DOM元素引用一起使用

let toggle_button = $('#toggle-btn')
toggle_button.on('click', function (event) {

  event.stopPropagation();
   
  // Get container
  let container = get_container();
  
  // Toggle class
  toggle_button.toggleClass('toggled');
  
  if (toggle_button.hasClass('toggled')) {
    toggle_button.after(container);
  } else {
    var el = toggle_button.parent().find('div');
    el.remove();
  }
  
});


function get_container ()
{
  return $('<div/>').css({ 
    width: '100%', height: 'auto', 
    background: 'yellow' 
  }).html('container');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:100%;height:auto;background:#000;">
  <button id="toggle-btn">Toggle Button</button>
</div>

Answer 2

您可以将render() { return ( <Cell cellStyle="RightDetail" title={<Text style={{ color: '#00a7c0', fontWeight: "bold" }}>Durum</Text>} detail={ this.state.itemDURUM === '0' ? <Text style={{ color: '#0094ff', fontWeight: "bold" }}>Order Pending</Text> : <Text style={{ color: '#ff1706', fontWeight: "bold" }}>Order Confirmed</Text> } /> ) }从方法中移出，以便保留对先前单击添加的元素的引用。

container

let toggle_button = $('#toggle-btn')
// Get container
let container = get_container();
toggle_button.on('click', function (event) {

  event.stopPropagation();
  
  // Toggle class
  toggle_button.toggleClass('toggled');
  
  if (toggle_button.hasClass('toggled')) {
    toggle_button.after(container);
  } else {
    console.log('Remove container here ...');
    container.remove();
  }
  
});


function get_container ()
{
  return $('<div/>').css({ 
    width: '100%', height: 'auto', 
    background: 'yellow' 
  }).html('container');
}

Answer 3

要删除特定容器，最好使用标识符。

因此您的get_container变为：

function get_container ()
{
  return $('<div/>').css({ 
    width: '100%', height: 'auto', 
    background: 'yellow' 
  }).html('container').attr('id', 'myContainer');
}

并且container.remove();可以更改为$('#'+container.prop('id')).remove();

Answer 4

问题是您要为每次点击初始化容器。

let toggle_button = $('#toggle-btn');
  
// Get container
let container = get_container();

toggle_button.on('click', function (event) {

  event.stopPropagation();

  // Toggle class
  toggle_button.toggleClass('toggled');
  
  if (toggle_button.hasClass('toggled')) {
    toggle_button.after(container);
  } else {
    container.remove();
  }
  
});


function get_container ()
{
  return $('<div/>').css({ 
    width: '100%',
    height: 'auto', 
    background: 'yellow' 
  }).html('container');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:100%;height:auto;background:#000;">
  <button id="toggle-btn">Toggle Button</button>
</div>

使用切换按钮移除容器

4 个答案: