跟踪div类和数据id="&引用；以javascript（jquery）为例_Javascript_Jquery_Html_Css_Ajax

跟踪div类和数据id="&引用；以javascript（jquery）为例

javascript jquery html css ajax

跟踪div类和数据id="&引用；以javascript（jquery）为例,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,有一个例子 <button id="tri" style='display: block;'>add</button> <div id="box" style='display: none;' > 需要执行相同操作，以便此按钮只跟踪class和数据id <div class="block_view" data-id="52" style='display: none; ></div> 您必须在选择器中插入id变量，您

有一个例子

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

需要执行相同操作，以便此按钮只跟踪

class

和

数据id

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

您必须在选择器中插入id变量，您只需将文本sting id放入其中。此外，jQuery返回的是jQuery对象而不是元素，因此可以改用document.querySelector
var b = document.querySelector('.block_view[data-id="'+id+'"]');

您可以使用$（this.data（'id'）获取数据id
和样式由$（this.css（“display”）
。您可以找到具有数据id的所有div
，并基于该id显示/隐藏

$（“.editblock”）。单击（函数（）{
var id=$（this.data（'id'）；
控制台日志（id）
var styles=$（this.css（“display”）；
console.log（样式）
$（“div”）。每个（函数（）{
if（$（this.attr（'id'）==id&&$（this.css（“显示”）==“无”）{
$（this.css（'display'，'block'）；
}
});
});

编辑
第一组
第二组
第三组
变量id
包含动态数据，但如果将其用作字符串，则应以正确的方式构成选择器
b
引用jQuery元素，您应该使用而不是style
属性
请尝试以下方法：

$（'body'）。在（'click'，'editblock'，function（）上{
变量$this=$（this），
id=$this.attr（'data-id'）；
变量b=$（'.block_视图[数据id='+id+']）；
如果（b.css（'display'）=='none'）
b、 css（“显示”、“块”）；
else b.css（'display'，'none'）；
})

编辑
块视图

编辑
演示
$（'.editblock'）。单击（函数（）{
var id=$（this.attr（'data-id'）；
变量b=$（'.block_视图[数据id='+id+']）；
如果（$（b）.css（'display'）=='none'）{
$（b）.css（'显示'，'块'）
}
});
我做了，但它给出了一个错误，它可以与什么连接？TypeError:b.style未定义更新语法错误：'.block_view[data id=51]'不是有效的选择器。谢谢你这么多，你真的帮了大忙！！乌克兰人你好
<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>

var b = document.querySelector('.block_view[data-id="'+id+'"]');

<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>
    <button class="editblock" data-id="51">edit</button>
    <div class="block_edit" style="display: none;" data-id="51"></div>
    <div class="block_view" data-id="51" style='display: none;'>Demo</div>

</body>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script type="text/javascript"  src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>
    $('.editblock').click(function(){

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

</script>
</html>