Question

经过对谷歌和各种论坛的大量研究，我在这里发布了这个问题。

我有5个div元素，如下所示 -

<div id="domain1"></div>
<div id="domain2"></div>
<div id="domain3"></div>
<div id="domain4"></div>
<div id="domain5"></div>

当我点击一个div时，我想隐藏其余的div。

为此，我将代码编写为 -

$("#^='domain'").not(id).hide();

其中id是一个变量（var id），它动态地保存被点击的div元素的id。

这隐藏了所有五个div元素。这不排除点击的div元素。

请帮助，我哪里出错。

Answer 1

您匹配ID #^='domain'开头的语法不正确 - 它缺少[]括号并使用#代替id。

这就是你想要的：

$('div').click(function() {
  var id = $(this).attr("id");
  console.log(id); // note it does not include the #
  $("[id^='domain']").not('#'+id).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="domain1">1</div>
<div id="domain2">2</div>
<div id="domain3">3</div>
<div id="domain4">4</div>
<div id="domain5">5</div>

Answer 2

这里的.not（）完全应该做的事情。当然，我传递了被点击的元素本身，而不是尝试构建一个ID选择器来匹配。

＆＃13;

$(document).ready(function(){
  $("div").on("click", function(){
    var clickedEl = $(this);
    $("div").not(clickedEl).toggle();
    
    // OR ANOTHER WAY, if they're at the 
    //   same level in the DOM. Simply comment
    //   out the above, and uncomment the below
    //   to see the same result.
    //
    //clickedEl.siblings("div").toggle();
  })
})

＆＃13;

div {
  height: 25px;
  width: 200px;
  border: 1px dotted blue;
  background-color: #FFA;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="domain1">a</div>
<div id="domain2">b</div>
<div id="domain3">c</div>
<div id="domain4">d</div>
<div id="domain5">e</div>

＆＃13;

.jquery无法正常工作

2 个答案: