jQuery的switchClass（）不與CSS工作：選擇

JSFiddle demojQuery的switchClass（）不與CSS工作：選擇

後，如果你去觀看的jsfiddle演示，並嘗試它，你可以看到藍色邊框的div是走開，因爲我想，但文本「在switchClass（）中，「Opened」不會變爲「Closed」。（如果我使用其他類型的CSS元素，而不是：選擇比switchClass（後）正常工作）

HTML：

<div class="filter_title"> 
    <div class="filter_title_price" id="filter_price_toggle"><span>Price</span> 
    </div> 
</div> 
<div class="hideprice" style="margin-top:10px; border:1px solid blue;">If you click Price [Opened] I will go away :) but the text "Opened" won't change to text "Closed"</div>

JS：

$(function() { 
    $("#filter_price_toggle").click(function() { 
     $(".hideprice").toggle("blind", 250); 
     $("filter_title_price").switchClass("filter_title_price", "filter_title_price2", 250); 
     $("filter_title_price2").switchClass("filter_title_price2", "filter_title_price", 250); 
     return false; 
    }); 
});

CSS：

.filter_title { 
    font-weight:bold; 
    padding: 3px 10px; 
    border-style: solid; 
    border-width: 1px 1px 1px 0; 
    border-color: #fff #d9d9d9 #d9d9d9; 
    background-color: #f6f6f6; 
    margin-top:5px; 
} 
.filter_title_price:after { 
    content:"[Opened]"; 
} 
.filter_title_price2:after { 
    content:"[Closed]"; 
}

如何更改文字？

或者switchClass（）和css：after選擇器不合作？

來源

2013-02-21 Gery

該代碼缺少類選擇器的.，並且一旦切換該類正在切換回原來的位置。以下示例在div上引入了一個新類以避免衝突，並利用條件語句確定如何切換CSS類。

HTML

<div class="filter_title"> 
    <div class="hook filter_title_price" id="filter_price_toggle"><span>Price</span> 
    </div> 
</div> 
<div class="hideprice" style="margin-top:10px; border:1px solid blue;">If you click Price [Opened] I will go away :) but the text "Opened" won't change to text "Closed"</div>

的Javascript

$(function() { 
    $("#filter_price_toggle").click(function() { 
     $(".hideprice").toggle("blind", 250); 
     if($(".hook").hasClass("filter_title_price")){ 
      $(".hook").switchClass("filter_title_price", "filter_title_price2", 250); 
     }else{ 
      $(".hook").switchClass("filter_title_price2", "filter_title_price", 250); 
     } 
     return false; 
    }); 
});

工作實例：http://jsfiddle.net/ys54w/9/

來源

2013-02-21 10:31:09

OMG愚蠢的錯誤的點...我看到你的其他midification – Gery 2013-02-21 10:36:31

@Gery發生在我們所有人身上。我可以看到你如何去那裏，因爲你使用switchClass函數後它不需要''.' – 2013-02-21 10:37:43

謝謝！好的解決方案 – Gery 2013-02-21 10:57:11

你沒有檢查類是否在DOM存在或not.and您直接射擊2切換類事件。這樣它不會工作。

您需要檢查首先存在什麼類，並相應地切換類。

if($(this).attr("class")=="filter_title_price") 
    $(this).switchClass("filter_title_price", "filter_title_price2", 250); 
    else 
    $(this).switchClass("filter_title_price2", "filter_title_price", 250);

Working Demo

來源

2013-02-21 10:36:08

這裏也謝謝你 – Gery 2013-02-21 10:58:54

好了，兩個問題在這裏。

首先，您的選擇器對於您正在運行switchClass的對象是錯誤的。既然你用它點擊了它，你可以使用$(this)。
其次，您嘗試切換，然後在每次點擊時再次切換回來。每次點擊只需要執行相關switchClass。

試試這個：

$(function() { 
    $("#filter_price_toggle").click(function() { 
    $(".hideprice").toggle("blind", 250); 
    if ($(this).hasClass("filter_title_price")) 
     $(this).switchClass("filter_title_price", "filter_title_price2", 250); 
    else 
     $(this).switchClass("filter_title_price2", "filter_title_price", 250); 
    return false; 
    }); 
});

來源

2013-02-21 10:36:28 toomanyredirects

不錯，謝謝 – Gery 2013-02-21 10:59:17

試試這個：

$(function() { 
     $("#filter_price_toggle").on('click', function() { 
      var element = $(this); 
      $(".hideprice").toggle("blind", 250); 
      element.hasClass("filter_title_price") ? element.switchClass("filter_title_price", "filter_title_price2", 250) : element.switchClass("filter_title_price2", "filter_title_price", 250); 
     }); 
    });

來源

2013-02-21 10:37:02 Vaclovas

嘗試此javascript：

$(function() { 
$("#filter_price_toggle").click(function() { 
    $(".hideprice").toggle("blind", 250); 
    if($(this).hasClass('filter_title_price')) 
     $(".filter_title_price").switchClass("filter_title_price", "filter_title_price2", 250); 
    else 
     $(".filter_title_price2").switchClass("filter_title_price2", "filter_title_price", 250); 
    return false; 
}); 
});

來源

2013-02-21 10:37:08 RedDevil79

jQuery的switchClass（）不與CSS工作：選擇

回答

相關問題