0

私はまだ JQuery と JavaScript 全体にかなり慣れていないので、ご容赦ください。質問に対する答えをウェブで検索して、少し実験してみましたが、うまくいきません。とにかく、 JavaScriptで複数のCSSクラスを配列に格納する方法はありますか?

次のような友人のポートフォリオ Web サイト用の単純な JQuery を作成しています。

$('.item.two').click(function(){
    $('.content.item, .current.item').show();
    $('.content.item, .content.item, .content.item, .current.item, .current.item, .current.item').hide();
    $('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
    $('.item.two').fadeTo(0, 1.0);
});

これは、特定の要素を非表示にして、対応するアイコンがクリックされたときにのみ表示するだけです。これはまた、クリックすると不透明度がメイン クラスの 50% オフから 100% に変わります。

コード自体に問題はなく、意図した目的を果たしています。しかし、これらのクラスを再利用可能な配列に保持するだけで、このコードを少しきれいにする方法はありますか? 私はそれが可能であるべきだと感じていますが、方法がわかりません。

ありがとう！

EDIT : 申し訳ありませんが、実際に 4 つの異なるクラスを使用して非表示または表示していることは明確ではありませんでした。したがって、前のビットの代わりに、実際には

$('.item.two').click(function(){
    // this is the content i want to show on click
    $('.content.itemTwo').show();
    // this is the content that i want to hide/remain hiding on click
    $('.content.itemOne, .content.itemThree, .content.itemFour').hide();

    // these are icons representing the content
    $('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
    $('.item.two').fadeTo(0, 1.0);
});

また、これは私の HTML です。私が言ったように、私が実現しようとしていることは起こります。それを実現するためのより良い方法があるように感じます。

<!-- these are icons representing the written content-->
<div class="item one">
    <div class="fs1" aria-hidden="true" data-icon="&#xe000;"></div>
</div>
<div class="item two">
    <div class="fs1" aria-hidden="true" data-icon="&#xe003;"></div>
</div>
<div class="item three">
    <div class="fs1" aria-hidden="true" data-icon="&#xe001;"></div>
</div>
<div class="item four">
    <div class="fs1" aria-hidden="true" data-icon="&#xe002;"></div>
</div>

<!-- this is the written content to be shown upon clicking corresponding icon -->
<div class="content itemOne">
    <h3>itemOne</h3>
    <p>....</p>
</div>
<div class="content itemTwo">
    <h3>itemTwo</h3>
    <p>...</p>
<div class="content itemThree">
    <h3>itemThree</h3>
    <p>...</p>
</div>
<div class="content itemFour">
    <h3>itemFour</h3>
    <p>....</p>
</div>

今見てみると、おそらく .content または .item に追加のセレクターは必要ありません。

4

4 に答える 4

1

私が正しく理解していれば、クリックされた要素を変更しようとしています。

 $('.item.two').click(function(){
    // there is no reason to show and then hide all
    $('.content.item, .current.item').hide();
    $('.item').not(this).fadeTo(0, 0.5);
    $(this).fadeTo(0, 1.0);
});

これがあなたのために働くかどうかを確認してください

別のアプローチを編集して、ループ内のクラスでインデックスサフィックスを使用することができます。

代わりに、class1、class2、class3 を使用できます。

$('.item.two').click(function(){
    // this is the content i want to show on click
    $('.content.itemTwo').show();
    // this is the content that i want to hide/remain hiding on click
    $('.content.itemOne, .content.itemThree, .content.itemFour').hide();

    // these are icons representing the content
    $('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
    $('.item.two').fadeTo(0, 1.0);
});

に

for(var i=1;i<=4;i++){
  $('.item.'+i).click(function(){
        // this is the content i want to show on click
        $('.content.class'+i).show();
        // this is the content that i want to hide/remain hiding on click
        $('.content class').hide();

        // these are icons representing the content
        $('.item').not(this).fadeTo(0, 0.5);
        $(this).fadeTo(0, 1.0);
    });

}

あなたがそれからアプローチを得ることを願っています

于 2013-07-25T05:32:45.730 に答える
0

pushのような方法を使用します

var arrayClass = [];
$('.item.two').click(function() { 
   arrayClass.push($(this));
});

alert(arrayClass);
于 2013-07-25T05:26:34.967 に答える
0

同じクラスを何度も繰り返す必要はなく、クラスを配列に格納する必要もありません。

変化する

 $('.content.item, .content.item, .content.item, .current.item, .current.item, .current.item').hide();

に

 $('.content.item').hide();

この場合 stringの代わりにクラスを保存できますarray$('.item.one, .item.three, .item.four')

classesSet = ".item.one, .item.three, .item.four";
$(strClassesSet).fadeTo(0, 0.5);
于 2013-07-25T05:29:01.433 に答える
0

多くのクラスを使用してきたため、jQuery を使用して項目のリストを選択しようとしているということですか? これを行うには、jquery インデックスを eq と this セレクターと共に使用します。インデックス機能を使用してコードを短くする方法の完全な説明は 次のとおりですhttp://api.jquery.com/index/

于 2013-07-25T05:29:59.233 に答える