Question

您好我在我的应用程序中使用foreach重复div。因此，我面临当前元素点击功能的问题。当我点击当前div时，我需要突出显示另一个位于目标div旁边的div（这不是儿童div）。所以，问题是在另一个div中突出显示同样的div，它正在重复使用foreach。

请看一下并善意帮助我。

以下是示例链接Fiddle

点击＆＃34;点击1＆＃34; div，然后你会得到什么是问题。

＆＃13;

$(".prev").click(function(){
   
    $( ".prev ~ div" ).css( "border", "3px groove blue" );
});

＆＃13;

div, span {
    display: block;
    width: 80px;
    height: 80px;
    margin: 5px;
    background: #bfa;
    float: left;
    font-size: 14px;
  }
  div#small {
    width: 60px;
    height: 25px;
    font-size: 12px;
    background: #fab;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="prev">click1</span>
<div>click 1 highlight</div>    
</div>

<div>
<span class="prev">click1</span>
<div>click 1 highlight</div>    
</div>

＆＃13;

`

Answer 1

Ids在HTML中必须是唯一的。所以请改用一个类：

<div>
<span class="prev">span#prev</span>
<div>div sibling</div>    
</div>

<div>
<span class="prev">span#prev</span>
<div>div sibling</div>    
</div>

jquery的

$(".prev").click(function(){
    $(".prev").next().css("border", 'none');
    $( this).next().css( "border", "3px groove blue" );
});

Fiddle

Answer 2

您可以在CSS中设置样式并添加一个类并使用+

定位兄弟姐妹

＆＃13;

$(document).ready(function() {
  $("span").click(function() {
    $("span").removeClass('clicked');
    $(this).addClass('clicked')
  });
});

＆＃13;

div,
span {
  display: block;
  width: 80px;
  height: 80px;
  margin: 5px;
  background: #bfa;
  float: left;
  font-size: 14px;
}
div#small {
  width: 60px;
  height: 25px;
  font-size: 12px;
  background: #fab;
}
.clicked + div {
  border: 3px groove blue
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span id="prev">span#prev</span>
  <div>div sibling</div>
</div>

<div>
  <span id="prev">span#prev</span>
  <div>div sibling</div>
</div>

＆＃13;

JQUERY：立即元素（不是子元素）不会突出显示另一个div元素

2 个答案: