帶通配符的jQuery循環

我正在用uls進行一些html標記。每當用戶點擊與類vid_ *（*爲某事）的鏈接時，應該顯示帶有該id的ul。當我使用不帶通配符循環，以下工作：

$(".vid_all").click(function() { 
    $("#vid_bla").addClass("hidden").removeClass("visible"); 
    $("#vid_muh").addClass("hidden").removeClass("visible"); 
    $("#vid_tschub").addClass("hidden").removeClass("visible"); 
}); 

$(".vid_bla").click(function() { 
    $("#vid_bla").addClass("visible").removeClass("hidden"); 
    $("#vid_muh").addClass("hidden").removeClass("visible"); 
    $("#vid_tschub").addClass("hidden").removeClass("visible"); 
}); 

$(".vid_muh").click(function() { 
    $("#vid_muh").addClass("visible").removeClass("hidden"); 
    $("#vid_bla").addClass("hidden").removeClass("visible"); 
    $("#vid_tschub").addClass("hidden").removeClass("visible"); 
}); 

$(".vid_tschub").click(function() { 
    $("#vid_tschub").addClass("visible").removeClass("hidden"); 
    $("#vid_bla").addClass("hidden").removeClass("visible"); 
    $("#vid_muh").addClass("hidden").removeClass("visible"); 
});

現在我想以動態處理循環和縮短有點通配符代替使用。

我嘗試以下，但它不工作：

var vidRnd = /(.vid_*)/; 
var arrVidId = new Array("#vid_plattform", "#vid_format", "#vid_bro"); 

for (var k in vidRnd) { 

    $(k).click(function() { 
     for (var i in arrVidId) { 
      $(i).addClass("hidden").removeClass("visible"); 
     } 
     $(k).addClass("visible").removeClass("hidden"); 
    }); 
};

我想使用數組通配符太多，但我不知道怎麼樣。對此有何想法？

來源

2013-09-21 sqe

您可以使用下面的jQuery

var vidRnd = new Array(".vid_all", ".vid_bla", ".vid_muh", ".vid_tschub") 
var arrVidId = new Array("#vid_bla", "#vid_muh", "#vid_tschub"); 
$.each(vidRnd, function(index, k) { 
$(k).click(function() { 
    for (var i in arrVidId) { 
     $(i).addClass("hidden").removeClass("visible"); 
    } 
    $(k).addClass("visible").removeClass("hidden"); 
}); 
});

來源

2013-09-21 10:26:42

不是比你的代碼「短」，但它與任意數量的類別，只要作品的class（以及相應的id）與vid_開始，是最後類在列表中。

$("ul.vidkategorie").on("click", "a", function (ev) { 
    var classNames = this.className.split(/\s+/), 
     selectedClass = classNames[classNames.length - 1]; 

    if (selectedClass) { 
     // hide all lists 
     $("ul.vidkat_follow").addClass("hidden"); 

     // show the selected one (or all) 
     if (selectedClass == "vid_alle") { 
      $("ul[id^=vid_]").removeClass("hidden"); 
     } else { 
      $("#" + selectedClass).removeClass("hidden"); 
     } 
    } 

    // prevent the browser from following the link 
    ev.preventDefault(); 
});

fiddle

來源

2013-09-21 10:33:44 Andreas

通過改變在所有類別中的href屬性指向相關的類別，你可以使用這樣的方法：

標記

<ul class="vidkategorie vidkat_first"> 
<li><a class="vid_active vid_link" href="#vid_alle">All</a></li> 
<li><a class="vid_inactive vid_link" href="#vid_bla">Category 1</a></li> 
<li><a class="vid_inactive vid_link " href="#vid_muh">Category 2</a></li> 
<li><a class="vid_inactive vid_link " href="#vid_tschub">Category 3</a></li> 
</ul>

$('.vidkat_first a').click(function(e) { 
    e.preventDefault(); 
    var target= $(this).attr('href'); 
    if(target=="#vid_alle") { 
    $('.vidkat_follow').show(); 
    } 
    else { 
    $('.vidkat_follow').hide(); 
    $(target).show(); 
    } 
});

來源

2013-09-21 10:59:15

如果我正確理解這一點，你想切換下面的鏈接信息，對不對？要爲所有具有相同標記的元素執行此操作，可以在選擇器中使用jQuery的上下文特性。你可能想要重構你的標記來支持父母/孩子選擇器。

如果您的標記看起來像這樣的例子：

<a class="toggleAll">Toggle all</a> 
<div class="item"> 
    <a href="#" class="link">Link</a> 
    <ul class="info"> 
     <li>lala</li> 
     <li>blub</li> 
    </ul> 
</div> 
<div class="item"> 
    <a href="#" class="link">Link</a> 
    <ul class="info"> 
     <li>lala</li> 
     <li>blub</li> 
    </ul> 
</div>

的JavaScript來切換所有，當用戶點擊該鏈接切換一個元素很簡單：

$(document).ready(function() { 
    $(".toggleAll").click(function() { 
     $(".info").toggle(); 
    }); 
    $(".item .link").click(function (e) { 
     $(".info", $(this).parent()).toggle(); 
    }); 
});

所以這應該真的簡化你的代碼，這取決於你如何構建你的標記。原因而不是類名稱，您還可以使用ID或名稱或其他來識別您的項目。

：編輯：要護目鏡所有其他項目和有在頁面加載默認的狀態，您可以修改這樣的腳本：

$(document).ready(function() { 
$(".hideAll").click(function() { 
    $(".info").hide(); 
}); 
$(".showAll").click(function() { 
    $(".info").show(); 
}); 
$(".item .link").click(function (e) { 
    var currentInfo = $(".info", $(this).parent()); 
    $(".info").not(currentInfo).hide(); 
    $(currentInfo).show(100); 
}); 
$(".info").hide(); 
$(".info").first().show();

}）;

來源

2013-09-21 11:12:46 MichaC

沒有承認在第一位小提琴鏈接，這裏是一個解決方案，它非常靈活，可以輕鬆地擴展它

$(".vid_alle",".vidkat_first").click(function() { 
    $(".vidkat_follow").show(); 
}); 
$(".vid_link", ".vidkat_first").not(".vid_alle").click(function() { 
    $(".vidkat_follow").hide(); 
    var catLink = this; 
    $(".vidkat_follow").each(function(index, elem){ 
     if ($(catLink).hasClass(elem.id)) { 
      $(elem).show(); 
     } 
    }); 

});

http://jsfiddle.net/vLUZF/1/

來源

2013-09-21 11:56:06 MichaC

帶通配符的jQuery循環

回答

相關問題