javascript - 以 javascript (jquery) 中的 track div class 和 data-id =""为例

Question

有一个例子

<button id="tri" style='display: block;'>add</button>
        <div id="box" style='display: none;' >

由 id 跟踪

$('#tri').on('click', function(){

                var e = document.getElementById('box');
                var b = document.getElementById('tri');
                if(e.style.display == 'none')
                    $("#box").slideDown();
                b.style.display = 'none';
            })

需要做同样的事情，以便此按钮仅跟踪 class 和 data-id

<div class="block_view" data-id="52" style='display: none; ></div>

我试过没用

<button class="editblock" data-id="51">edit</button>

<div class="block_edit" style="display: none;" data-id="51"></div>

<script>
        $('body').on('click', '.editblock', function() {
            var $this = $(this),
                id = $this.attr('data-id'); 
          var b = $('.block_view[data-id=id]');
           if(b.style.display == 'none')
            b.style.display = 'block';
        })
</script>

我做错了什么？

Answer 1

变量 id 包含动态数据，但您将其用作字符串，您应该以正确的方式形成选择器。

b 指的是一个 jQuery 元素，你应该使用 .css()而不是 style 属性。

尝试以下方式:

$('body').on('click', '.editblock', function() {
  var $this = $(this),
  id = $this.attr('data-id'); 
  var b = $('.block_view[data-id='+id+']');
  if(b.css('display') == 'none')
    b.css('display', 'block');
  else b.css('display', 'none');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button class="editblock" data-id="51">edit</button>

<div class="block_view" data-id="51" style='display: none;' >block_view</div>