Question

我正在使用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");
    });
};

我也想为数组使用通配符，但我不知道如何使用。关于这个的任何想法？

Answer 1

您可以使用以下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");
});
});

Answer 2

不比您的代码“更短”，但只要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

Answer 3

通过将所有类别中的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>

JS

$('.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();
  }
});

Answer 4

如果我理解正确，您想要在链接下面切换信息，对吧？要对具有相同标记的所有元素执行此操作，可以在选择器中使用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();

}）;

Answer 5

首先没有认识到小提琴链接，这里有一个足够灵活的解决方案，可以轻松扩展它

$(".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/

带通配符的jQuery循环

5 个答案: