使用$（this）.find和.click（）jQuery

单击加号图标我希望检查图标仅出现在特定div中的一个加号图标上。并非所有页面上都加上图标。这里是jQuery后面的html。

<div class="pin"> 
     <img class="brand-logo" src="img/nike.jpg" /> 
     <div class= "hover-popup"> 
      <h1 class="brand-name">Nike</h1> 
      <img class="plus-icon" src="img/plus-icon.png" /> 
      <img class="check-icon" src="img/check-icon.png" /> 
     </div> 
    </div> 

    <div class="pin"> 
     <img class="brand-logo" src="img/calvinklein.jpg" /> 
     <div class= "hover-popup"> 
      <h1 class="brand-name">Calvin Klein</h1> 
      <img class="plus-icon" src="img/plus-icon.png" /> 
      <img class="check-icon" src="img/check-icon.png" /> 
     </div>

jQuery的

$(".plus-icon").click(
    function() { $(this).find('.check-icon').show(); }, 
    function() { $(this).find('.plus-icon').hide(); } 
); 

$(".check-icon").click(function() { 
    function() { $(this).find('.plus-icon').show(); }, 
    function() { $(this).find('.check-icon').hide(); } 
);

来源

2014-12-27 Calvin Hemington

使用，而不是寻找元素 –

在点击的元素只是不觉得它直接选择，使用'this'直接和另外一个，去给家长，然后得到孩子，然后找到元素 –

顺便说一句我觉得找到应该返回一个数组。我对吗？ –

首先找到包含分区，因为它的.check-icon,.plus-icon使用.closest()的祖先，那么你可以使用find()

$(this).closest('.hover-popup').find('.check-icon').show();

来源

2014-12-27 00:48:32 Musa

你可以使用jQuery的siblings选择。

$(".plus-icon").click(
    function() { $(this).siblings('.check-icon').show(); }, 
    function() { $(this).hide(); } 
); 

$(".check-icon").click(function() { 
    function() { $(this).siblings('.plus-icon').show(); }, 
    function() { $(this).hide(); } 
);

鉴于您的示例HTML，这将是首选解决方案。

或者，使用.parent，然后使用find从那里下降。

$(".plus-icon").click(
    function() { $(this).parent().find('.check-icon').show(); }, 
    function() { $(this).parent().find('.plus-icon').hide(); } 
); 

$(".check-icon").click(function() { 
    function() { $(this).parent().find('.plus-icon').show(); }, 
    function() { $(this).parent().find('.check-icon').hide(); } 
);

最后，如果你不知道在哪里的.hover-popup元素将是相对按钮，使用.closest找到它，然后从那里下降。

$(".plus-icon").click(
    function() { $(this).closest('.hover-popup').find('.check-icon').show(); }, 
    function() { $(this).closest('.hover-popup').find('.plus-icon').hide(); } 
); 

$(".check-icon").click(function() { 
    function() { $(this).closest('.hover-popup').find('.plus-icon').show(); }, 
    function() { $(this).closest('.hover-popup').find('.check-icon').hide(); } 
);

来源

2014-12-27 00:48:41

绝对是最好的选择 –

使用jQuery你的代码看起来像：

$(document).ready(function(){  
    $('.plus-icon').click(function(){ 
     $(this).hide(); 
     $(this).siblings('.check-icon').show() 
    }) 
    $('.check-icon').click(function(){ 
     $(this).hide(); 
     $(this).siblings('.plus-icon').show() 
    }) 
})

来源

2014-12-27 00:51:00 MMK

加上图标点击隐藏自己，你在两种情况下在两种功能中都做了相反的事情 –

试试这个

$(".plus-icon").click(
    function() { $(this).next('.check-icon').show(); }, 
    function() { $(this).hide(); } 
); 

$(".check-icon").click(function() { 
    function() { $(this).prev('.plus-icon').show(); }, 
    function() { $(this).hide(); } 
);

来源

2014-12-27 00:54:54

也许最简单的方法是使用.siblings（）函数。

如

$('.plus-icon').click(function(){ 
    $(this).siblings('.check-icon').show(); 
});

来源

2014-12-27 02:22:02 Arvs

使用$（this）.find和.click（）jQuery

回答

相关问题