iT邦幫忙

0

JQ選擇器一次選不同種類的對象

  • 分享至 

  • xImage

各位高手好~我想請問如果要在JQ的選擇器中一次選不同種類的對象(如下),該如何寫在一起呢?

$(this).removeAttr("style");
$(".tab0" +N ).removeAttr("style");
$(".active").removeAttr("style");``

※補充一下整串碼

<section class="tabMenu">
<div class="noneBox" id="tabBTN1"><a href="#">快來報名</a></div>
<div class="noneBox active" id="tabBTN2"><a href="#">寒假春節</a></div>
<div class="noneBox" id="tabBTN4"><a href="#">清明連假</a></div>
<div class="noneBox" id="tabBTN3"><a href="#">早鳥促銷</a></div>
</section>

<section class="tabText">
<ul class="tab02"></ul>
<ul class="tab01"></ul>
<ul class="tab03"></ul>
<ul class="tab04"></ul>
</section>
<script type="text/JavaScript">

$("[id^=tabBTN]").hover(
    function(){
    var N = this.id.substr(6);
    $(this).css("background-color","#fff").siblings().css("background-color","#f9f123");
    $(".tab0" +N ).css("z-index","11");
    },
    function(){
    var N = this.id.substr(6);
    $(this).removeAttr("style");
    $(".tab0" +N ).removeAttr("style");
    $(".active").removeAttr("style");
    }
);
</script>
你要的效果應該就是移開這四個導覽列之後移除所有css效果對吧?根據你的補充編輯我有在回答上補充對應程式碼。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

4
耿直小伙
iT邦新手 1 級 ‧ 2019-01-22 11:31:10
最佳解答

找出共同特徵使用「,」分隔。

// 移除class為tab0、active的style屬性
$('.tab0, .active').removeAttr('style');

// 移除img的style屬性
$('img').removeAttr('style');

// 移除自定義data-style的style屬性
$('[data-style]').removeAttr('style');

// 所以可以這樣寫
$('.tab0, .active, img, [data-style]').removeAttr('style');
// 樓主請看這段
$('[id^=tabBTN]').hover(function() {
    var N = this.id.substr(6);
    $(this).css('background-color', '#fff').siblings().css('background-color', '#f9f123');
    $('.tab0' + N).css('z-index', '11');
}, function() {
    $('.tabMenu div, .tabText ul').removeAttr('style');
    
    // 如果你完全不在意操作的是哪一個元素的話,下面這行更乾脆
    //$('section').children().removeAttr('style');
});
1

其實你的問題,有牽扯到規劃面的處理。

有幾件事需要先讓你了解。

正常來說,一般只要靠著css中class定義就可以變動與變更樣式。盡量可以的話,不要去做style的操作。而該是操作 class 的新增或是移除。這樣才會比較好控制。

這裏附帶你想問到的多重元素的同時操作。
這也是需要先針對你的html規劃來決定。一般多重元素的操作有如下的方式

$("table") //元件名直接定義處理
$(".all") //class直接定義處理,可以用同一個class來統一處理。

$(div[id^='tab']) //元件式屬於值前綴碼的選取處理。此代表獲取所有div元件中,其id命名的前綴為tab的所有元件

其實還有很多,我就拿你想要控制的html

<section class="tabText">
<ul class="tab02"></ul>
<ul class="tab01"></ul>
<ul class="tab03"></ul>
<ul class="tab04"></ul>
</section>

想要控制處理其中的ul。可以用如下的方式處理
$("section.tabText ul")
$(".tabText ul")
$("section ul")
$("ul[calss^='tab']")

但你要依你的需求來決定要如何去做處理

fillano iT邦超人 1 級 ‧ 2019-01-23 09:33:55 檢舉

我也覺得是規劃問題。要動態加上的style,其實可以放到一個class中,然後用removeClass來操作。並不需要用css來加然後去removeAttr...

另外,想要同時選一些elem,把他們加上同樣的class就可以了。class不需要出現在css中,只是用來當選擇器。另外,一個elem可以加多個class的,所以把style根據需求來規劃出不同class,然後根據需求掛上去,這樣就很有彈性。

我要發表回答

立即登入回答