如果有类然后删除类并添加类

时间:2012-11-23 23:40:10

标签: jquery html css html5

在这里遇到问题。这应该工作......我在html中有4个看起来像这样的元素

    <!-- Light Color Scheme - Header False and Show Faces True -->
        <div class="fb-like-box h-f_dsf-t visible" data-href="http://www.facebook.com/pages/Alpine-Adaptive-Scholarship-Program/344942928870040?fref=ts" data-width="292" data-show-faces="true" data-stream="true" data-header="false" colorscheme="light"></div>

虽然它们有不同的变化。因此,一个可以是标头true并且显示面是真的,而唯一的类将是“.h-t_dsf-t”。 javascript应该在它们之间进行选择,并告诉哪一个是活动的,哪一个不是。因此,一次只有一个有.visible类,而其他人有一个.invisible类。

提前致谢!

我的Javascript For Show Faces按钮 (注意.sf-no.click还没有任何内容,但将来我只是想让它工作为是按钮第一。)

// Show Faces
$(document).ready(function() {
    $('.sf-yes').click(
        function() {
            $('.sf-yes').removeClass('btn-not-active btn-active').addClass('btn-active');
            $('.sf-no').removeClass('btn-not-active btn-active').addClass('btn-not-active');
            // Show Faces Yes &&& Show Header No
            if ($('.sf-yes.sh-no').hasClass('.btn-active')) {
                $('.h-f_dsf-t').removeClass('.invisible').addClass('.visible');
                $('.visible').removeClass('.visible').addClass('.invisible');
            }
            // Show Faces Yes &&& Show Header Yes
            if ($('.sf-yes.sh-yes').hasClass('.btn-active')) {
                $('.visible').removeClass('.visible').addClass('.invisible');
                $('.h-t_dsf-t').removeClass('.invisible').addClass('.visible');
            }
            // Show Faces No &&& Show Header Yes
            if ($('.sf-no.sh-yes').hasClass('.btn-active')) {
                $('.visible').removeClass('.visible').addClass('.invisible');
                $('.h-t_dsf-f').removeClass('.invisible').addClass('.visible');
            }
            // Show Faces No &&& Show Header No
            if ($('.sf-no.sh-no').hasClass('.btn-active')) {
                $('.visible').removeClass('.visible').addClass('.invisible');
                $('.h-f_dsf-f').removeClass('.invisible').addClass('.visible');
            }
        }
    );
    $('.sf-no').click(
        function() {
            $('.sf-no').removeClass('btn-not-active btn-active').addClass('btn-active');
            $('.sf-yes').removeClass('btn-not-active btn-active').addClass('btn-not-active');
        }
    );
});

2 个答案:

答案 0 :(得分:4)

.hasClass('.btn-active')

应该是

.hasClass('btn-active')

没有点.

答案 1 :(得分:2)

您的代码存在一些问题。删除类或添加类时,不应包含fullstop。 .您已在.hasClassremoveClassaddClass上完成此操作。

此外,您的条件陈述似乎是矛盾的。也许你实际上是指你说的,但我假设包含类.sf-yes.sh-no的元素是两个不同的元素。你的jQuery语句正在寻找包含这两个类的元素。

使用类的选择器不是最佳实践也是值得的,你应该使用#sf-yes之类的唯一id。或者,如果必须使用多个类选择器,则在函数调用开始时将每个选择器分配给一个变量。

最后,我认为您不应将此标记为Facebook问题,因为您的代码专门针对jQuery。