特定 div 上的 Jquery 函数答案

【问题标题】：Jquery function on specific divs特定 div 上的 Jquery 函数
【发布时间】：2013-05-22 19:13:10
【问题描述】：

好的，我以前看过这个问题，但是提供的解决方案都不适合我，所以我决定开始一个新线程。我有一些以 HTML 显示的多个结果，我想分别对它们中的每一个使用 jQuery 函数。不幸的是，正如我所料，效果适用于所有 div。下面是一些代码：

<div class="block_result">


<div class="details">
    <div class="info">
        {$$Title} {$$points} {$$rates}
    </div>

    <div class="navbar">
        <div class='btn1'><a href="#d" class="fadingTab active" value="Tab1"><img src="some_png.png" alt=""></a></div>
        <div class='btn2'><a href="#f" class="fadingTab" value="Tab2"><img src="some_png.png" alt=""></a></div>
        <div class='btn3'><a href="#r" class="fadingTab" value="Tab3"><img src="some_png.png" alt=""></a></div>
    </div>


    <div class="contentContainer">

        <div id="Tab1" class="contentWrapper">

                <p class="contentText Tab1">some info</p>

            </div>

            <div id="Tab2" class="contentWrapper" >

                <p class="contentText Tab2">some other info</p>

            </div>

            <div id="Tab3" class="contentWrapper" >

                <p class="contentText Tab3">some other other info</p>

            </div>
    </div>

</div>

<div style="clear:both;"></div>

</div>

相同的 HTML 格式应用于每个结果。这是 jQuery 代码，以及我想要使用的函数。我想根据选择的选项卡更改每个结果的内容。

// On page load
$(document).ready(function(){

    //When a tab link is clicked
    $("a.fadingTab").click(function() {    

        // remove the active class from all classes
        $(".active").removeClass("active");

        // add the active class to this tab
        $(this).addClass("active");


        // fade element with the class 'contentText' out
        $(this).find(".contentText").fadeOut(700);


        // wait for fadeout then hide element with class 'contentWrapper'
        setTimeout(function(){ $(".contentWrapper").hide(); }, 700); 


        // find 'value' attribute value and show and fade elements
        var content_show = $(this).attr("value");
        setTimeout(function(){ $("#"+content_show).show(); }, 700);
        setTimeout(function(){ $("."+content_show).hide().fadeIn(700); }, 700);                   
    });
});

每次我按下一个选项卡按钮时，所有结果 div 都会发生变化。有任何想法吗？

【问题讨论】：

避免所有这些超时！动画完成时有回调！
您也没有动态分配/删除.contentText，那么为什么不只是$('.contentText').fadeOut(700)？

标签： javascript jquery class html

【解决方案1】：

 $this.find(".contentText").fadeOut(700);

不会工作

您的anchor 没有class="contentText" 作为其子项

替换为

$(".contentText").not( $this.attr('value')  ).fadeOut(700);

应该这样做

$("a.fadingTab").click(function () {
        var $this = $(this);
        // remove the active class from all classes
        $(".active").removeClass("active");
        // add the active class to this tab
        $this.addClass("active");
        var content_show = $this.attr("value");
        // fade element with the class 'contentText' out
        $(".contentText").show();
        $(".contentText").not($('.' + content_show)).fadeOut(700);
    });

Check Fifddle

【讨论】：

$(".contentText").fadeOut(700);是正确的。 $(this).find(".contentText").fadeOut(700);是我的错误，由于我努力寻找解决方案。请考虑这个版本。我试图编辑代码，但我不能...
不幸的是，这对我不起作用...这是网站i44.tinypic.com/14wri92.jpg 的布局。我遇到的主要问题是，当我单击一个选项卡按钮时，它会将内容更改为所有结果...作为 Web 开发人员，我还很新，所以请原谅我缺乏知识...

【解决方案2】：

首先，您最好使用.delay() 而不是超时

所以

 setTimeout(function(){ $(".contentWrapper").hide(); }, 700);

应该是

 $(".contentWrapper").delay(700).fadeOut();

其次，正如 pXL 所提到的，您使用选择器的方式错误。使用closest、find 和filter 的组合从一个选择器导航到另一个。

【讨论】：