1

小提琴

我有一些带有 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");
    });
};

我也想对数组使用通配符，但我不知道该怎么做。对此有什么想法吗？

4

5 回答 5

0

您可以使用以下 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-21T10:26:42.003 回答
0

Not "shorter" than your code but it works with any number of categories as long as the class (and the corresponding id) starts with vid_ and is the last class in the list.

$("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-21T10:33:44.717 回答
0

通过将所有类别中的 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();
  }
});
于 2013-09-21T10:59:15.510 回答
0

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

$(".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-21T11:56:06.723 回答
0

如果我理解正确，您想切换链接下方的信息，对吗？要对具有相同标记的所有元素执行此操作，您可以在选择器中使用 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 或名称或其他任何东西来标识您的项目。

:edit: 要查看所有其他项目并在页面加载时具有默认状态，您可以像这样修改脚本：

$(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-21T11:12:46.143 回答