12

私はstackoverflowとjQueryをまったく初めて使用するので、単純な関数を作成するのに少し苦労しています。

私は基本的に私のウェブサイトにランダムな数のリンクを持っておりid "filtro" + "some number"、それらのいずれかをクリックするアクションにコードを1つだけ書きたいと思っています（後で同じ「filtro」+「some number」を持つクラスに影響します）。

例: "#filtro3" をクリックし、".filtro3" に対して何かを行います。

問題は、「任意の数」の文字列を jQuery で記述する方法がわからないことです。私はこのようなことを考えています：

$(function () {
    $("#" + "filtro" + SOME NUMBER).click(function () {
            //Do something with the element "." + "filtro" + SOME NUMBER
    });
});

何か案は？ありがとうございました！！

P.: これは私の最初の質問です。間違っていたら申し訳ありません。

解決しました。dystroy のソリューションは魅力的でした。

他の人への将来の参照のために、私はこのコードを作成して、画像ギャラリーの単純なフィルター メニューを作成しました。このようにして、特定のトピックの写真を非表示/表示できました。

4

4 に答える 4

3

元の質問にはいくつかの良い答えがありますが、よりクリーンな代替案を提案したいと思います。

data-*要素を選択するために、ID の代わりに属性を使用できます。たとえば、要素は次のようになります

<a data-filtro=6 href='...'>link</a>
<a data-filtro=7 href='...'>link</a>
<a data-filtro=8 href='...'>link</a>

次に、これらの要素を使用して選択し、コールバック内$('[data-filtro]')で使用できます。$(this).data('filtro')例えば、

$("[data-filtro]").click(function() {
  var ele = $(this);
  var num = ele.data('filtro');
  // do whatever you want with num
});

この手法は、Foundation フレームワークを含む多くの場所で使用されています。要素 ID に依存しない別のプラグインに動作を簡単に抽出できます。アプリケーションがより複雑になり、各要素に関連付けられた動作の数が増えると、各要素は次のようになります。

<a data-filtro=6 data-foo data-bar href="...">link</a>

それ以外の

<a id="filtro-6_and_bar_and_foo" href="...">link</a>
于 2013-08-08T16:02:00.267 に答える
2

idクリックしclassた要素の と変更したい要素の が同じ場合、要素の をクラス セレクターの入力として使用するのと同じくらい簡単ですid。

コードをベースとして使用する:

$(function () {
    $("[id^=filtro]").click(function () {
        $("." + $(this).prop("id")).some_method_here();
    });
});

たとえば、ターゲット要素が<div>s であると想定しています。. . これ<div>により、一致するクラスを持つ要素が赤いテキストで表示されます。

$(function () {
    $("[id^=filtro]").click(function () {
        $("div",  "#filterTest").css("color", "#000000");
        $("." + $(this).prop("id")).css("color", "#FF0000");
    });
});

あなたは JQuery を初めて使用するようです。. .

  • dystroy が言ったように、"filtro" で始まる$("[id^=filtro]")すべての要素を選択します。id
  • $(this).prop("id")id現在の要素 (つまり、クリックされたばかりの要素) の を取得します
  • $("." + $(this).prop("id"))それを取りid、「。」を追加して、クラスセレクターの一部にします。最初に。これにより、クリックした要素classの値と同じ値を持つすべての要素が選択されます。id

編集: -this.idの代わりに (標準 JavaScript) を使用することもできます$(this).prop("id")。これは、同じことを実現するための JQuery の方法です。

于 2013-08-08T15:48:32.467 に答える
0 
$("[id^=filtro]").click(function() {
     $('.someClassName'+ this.id.match(/\d+/) ).toggle();      
});

ライブデモ

^in[id^=filtro]は「Starts With」セレクターで、ID で始まるmatchすべての要素 を選択します。
filtro

次に、少し正規表現を使用して ID から番号を
this.id.match(/\d+/);取得し、「このクリックされた要素 ID」の名前を取得し、すべての番号を取得しますd+
。その番号は、CLASS 要素セレクターと一致させるために使用されます。

于 2013-08-08T15:35:33.533 に答える