Question

我试图在点击每个div时显示不同的div ...但是当前点击时只有第一个div正确更改，而当我点击它们时其他div什么都不做。

$(document).ready(function(){
$('#liked').on('click', function() {$('#liked').hide();$('#notliked').show();});$('#notliked').on('click', function() {$('#liked').show();$('#notliked').hide();});
});

<div id='liked' style='float:left;display:none; height:100px; width:100px; background-color:blue'>1</div><div id='notliked' style='float:left;height:100px; width:100px; background-color:red'>2</div>
<div id='liked' style='float:left;display:none; height:100px; width:100px; background-color:blue'>1</div><div id='notliked' style='float:left;height:100px; width:100px; background-color:red'>2</div>
<div id='liked' style='float:left;display:none; height:100px; width:100px; background-color:blue'>1</div><div id='notliked' style='float:left;height:100px; width:100px; background-color:red'>2</div>
<div id='liked' style='float:left;display:none; height:100px; width:100px; background-color:blue'>1</div><div id='notliked' style='float:left;height:100px; width:100px; background-color:red'>2</div>

Answer 1

您发布的内容是无效标记。您不能一次又一次地对单个页面中的不同元素使用相同的ID，因此解决方法是，您可以将div的属性id更改为class：

<div class='liked' ......></div><div class='notliked' ......></div>
<div class='liked' ......></div><div class='notliked' ......></div>    
<div class='liked' ......></div><div class='notliked' ......></div>

然后你可以用jQuery的类选择器来做到这一点：

$(document).ready(function(){
    $('.liked').on('click', function() {
       $(this).hide().next().show();
    });
    $('.notliked').on('click', function() {
       $(this).hide().prev().show();
    });
});

根据您的评论：不希望所有这些内容在点击时同时更改。

因此，您必须使用$(this)在选择器的上下文中获取元素，并且必须使用.next()作为下一个元素，并使用.prev()作为前一个元素。< / p>

Answer 2

我没有测试过，但你可以尝试这种方式。设置一个parrent div为喜欢和不喜欢，并使用它来显示一个并隐藏其他。

的Javascript

$(".clickMe").on('click',function() {
      that  = $(this);
if(that.find("div.like").is(':visible')) {
      that.find("div.like").hide();
      that.find("div.dislike").show();
} else{
      that.find("div.like").show();
      that.find("div.dislike").hide();
}

});

HTML

<div class="clickMe"><div class="like"></div><div class="dislike"></div>
<div class="clickMe"><div class="like"></div><div class="dislike"></div>
<div class="clickMe"><div class="like"></div><div class="dislike"></div>

隐藏和显示多个Div

2 个答案: