2

この効果を達成しようとしていますが、コーディングが間違っていると確信しています。DIV各ボタンがクリックされたときに画像のコンテンツを交換したい。これは私がこれまでに持っているものですが、コードが間違っていると確信しています。これを達成するためのより良い方法はありますか？ありがとう、初心者の質問を許してください。

HTML:

<div class="item-1 content-item">
    I am the 1st image content
</div>

<div class="item-2 content-item" style="display: none;">
    I am the 2nd image content
</div>

<div class="item-3 content-item" style="display: none;">
    I am the 3rd image content
</div>

<div class="item-1 content-item">
    I am the content for item 1
</div>

<div class="item-2 content-item" style="display: none;">
    I am the content for item 2
</div>

<div class="item-3 content-item" style="display: none;">
    I am the content for item 3
</div>

<ul>
    <li class="change-item" data-item="1">Item 1</li>
    <li class="change-item" data-item="2">Item 2</li>
    <li class="change-item" data-item="3">Item 3</li>
</ul>

jQuery:

$('.change-item').click(function(){
    var this_item = $(this).attr("data-item");
    $('.content-item').hide();
    $('.item-' + this_item).fadeIn();  
});
4

1 に答える 1

0

正常に機能している場合でも、役立つと思われるヒントがいくつかあります。

  1. あなたのアイテムは実際には番号でグループ化されており、その間のものは隠されているので、あなたはそれらを一緒にグループ化することができます。
  2. マークアップでid属性を使用することを検討する必要があります。これにより、各アイテムが一意であることがより明確になり、JavaScriptの実行が高速になります。
  3. あなた<ul>は技術的に順調なので、より適切に<ol>。これは髪の毛を分割し、箇条書きの代わりに数字を表示し、正しくスタイルを設定するための作業を増やします。しかし、言及する価値があります。
  4. リストアイテムがインタラクティブであることを示すことを検討してください。それらをボタンまたはアンカーにすることができます（ハイパーリンクのように表示されます）。または、カーソルのcssルールを試して、ユーザーがリンクに移動したときにマウスポインターを変更します。

このような：

.change-item {
    cursor: pointer;
}

すべてをまとめると、次のようになります。

HTML：

<div id="item-1" class="content-item">
    <img src="/item-1.png"/>
    <p>I am the content for item 1</p>
</div>

<div id="item-2" class="content-item" style="display:none;">
    <img src="/item-2.png"/>
    <p>I am the content for item 2</p>
</div>

<div id="item-3" class="content-item" style="display:none;">
    <img src="/item-3.png"/>
    <p>I am the content for item 3</p>
</div>

<ol>
    <li><a href="#" class="change-item" data-item="1">Item 1</a></li>
    <li><a href="#" class="change-item" data-item="2">Item 2</a></li>
    <li><a href="#" class="change-item" data-item="3">Item 3</a></li>
</ol>

Javascript：

$('.change-item').click(function(){
    var this_item = $(this).attr("data-item");
    $('.content-item').hide();
    $('#item-' + this_item).fadeIn();
});

しかし、お分かりのように、コードはそのままで完全に機能します。あなたはひどく間違ったことを何もしませんでした（良い仕事です！）、これらはあなたやあなたのユーザーにとってこのページをより簡単にするかもしれないいくつかのことです。

于 2012-12-19T23:47:37.973 に答える