Question

我有这个html结构：

 <div id="main">
    <div id="box" data-id="1">
    <div id="box" data-id="2">
    <div id="box" data-id="3">
    <div id="box" data-id="4">
 </div>

当我在一个按钮的jquery中点击一个事件时，我想要一个带有data-id =＆＃34; 1＆＃34;隐藏起来：

$('#box[data-id=1]').hide();

这是工作。

但是如果我想要data-id =＆＃34; 2＆＃34;隐藏起来：

$('#box[data-id=2]').hide();

这不起作用，我应该这样写：

$('#main #box[data-id=2]').hide();

为什么最后一个工作或前一个工作不应该？

Answer 1

您不应在同一文档上下文中拥有多个重复的ID。将其更改为班级：

<div id="main">
  <div class="box" data-id="1">1</div>
  <div class="box" data-id="2">2</div>
  <div class="box" data-id="3">3</div>
  <div class="box" data-id="4">4</div>
</div>

然后：

$('.box[data-id=2]').hide();

Answer 2

尝试

$("#box[data-id='2']").hide();

代码

<html>
<head>
    <title>Rate Me If it helps</title>
    <script src="js/jquery.min.js"></script>
    <script>
    window.onload = function () {
        $("#box[data-id='2']").hide();
    }
    </script>
</head>
<body>
    <div id="main">
        <div id="box" data-id="1">1</div>
        <div id="box" data-id="2">2</div>
        <div id="box" data-id="3">3</div>
        <div id="box" data-id="4">4</div>
    </div>
</body>
</html>

Answer 3

您可以在页面中使用唯一ID，并且您错误地在那里为该div定义了多个框ID，因此请更改您的html代码如下： -

<div id="main">
  <div class="box" data-id="1">1</div>
  <div class="box" data-id="2">2</div>
  <div class="box" data-id="3">3</div>
  <div class="box" data-id="4">4</div>
</div>

Jquery代码与您相同： -

$('.box[data-id=2]').hide();

它可能对你有帮助。

Answer 4

您不能使用具有相同ID的多个元素，因此您需要使用类。即 <div class="box" data-id="1"> 第一种情况即 - $('#box[data-id=1]').hide(); 因为jquery总是可以选择具有该id的第一个元素。在给出课程而不是ids之后。现在试试这个$('.box[data-id=2]').hide();，它可行。

Answer 5

您不能拥有具有相同ID的多个元素，这些元素应该是唯一的

替换＆＃34; id =＆＃34; by＆＃34; class =＆＃34;和＆＃34;＃box＆＃34;通过＆＃34; .box＆＃34;

使用特定ID隐藏元素

5 个答案: