1

フィドル

uls を使用して HTML マークアップを作成しています。ユーザーがクラス vid_* (* as something) のリンクをクリックすると、その 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 のコンテキスト機能を使用できます。また、親/子セレクターをサポートするためにマークアップを再構築することもできます。

たとえば、マークアップが次のようになっているとします。 

<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>

ユーザーがリンクをクリックしたときにすべての要素と 1 つの要素を切り替える 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 に答える
0

関連するカテゴリを指すように All カテゴリの 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を使用できます

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 に答える