-1

対応するコンテンツ (content1、content2 など) にリンクされている 8 つのクリック可能なアイコン (pulse1、pulse2 - pulse 8) があります。以下のコードを毎回毎回書く代わりに、増加する整数などを使用してコードを要約する方法はありますか? このゲームにはかなり新しいです！

Dev バージョンはhttp://aceresponsive.webdevspace.co.ukで確認できます。

どうもありがとう。

$("#pulse1").click(function () {

  $(this).siblings(".active").removeClass("active");
  $(this).toggleClass('active');

    if ($('.purple-content').is(':visible')) {

       if ($('#content1').is(':visible')) {

           $(".purple-content").fadeOut();


       } else {

           $(".purple-content").fadeOut();

           $("#content1").fadeToggle();
       }

    } else {

       $("#content1").fadeToggle();

    }
});

これは以下を必要とします:

<div class="purple-content" id="content1">
<h2>the brain</h2>

<img src="assets/img/icons/brain-dark.png" width="144" height="167" alt="The Brain"      class="alignright">
<p>Stroke … A serious medical condition that occurs when the blood supply to part of the brain is cut off. It can affect our bodily functions, thought processing, ability to learn, communication and emotions.</p>

<h3>Learn More</h3>

<ul>
 <li><a href="#">The factors that can increase risk</a></li>
 <li><a href="#">Stroke symptoms</a></li>
 <li><a href="#">Types of stroke</a></li>
</ul>

</div>
4

2 に答える 2

0

HTML に何らかの参照を添付します。ここでは、jQuery のメソッドdata-でクリックすると収集できる属性を指定しました。.data()

<div class="pulse" data-contentref="1"><div>
<div class="pulse" data-contentref="2"><div>
..
<div class="pulse" data-contentref="n"><div>

<script>  
    $(".pulse").click(function () {

      var $Content = $('#content'+ $(this).data('contentref') +'');
      $(this).siblings(".active").removeClass("active");
      $(this).toggleClass('active');

        if ($('.purple-content').is(':visible')) {
           if ( $Content.is(':visible')) {
               $(".purple-content").fadeOut();
           } else {
               $(".purple-content").fadeOut();
               $Content.fadeToggle();
           }
        } else {
           $Content.fadeToggle();
        }
    });
</script>

追加されたフィドル: http://jsfiddle.net/7JvFZ/3/

于 2013-10-15T14:55:05.887 に答える
0

の末尾の ID 番号がpulse2 桁になることはないと仮定して、関数を一般化できます。

$("[id^=pulse]").click(function () {
    var idNum = this.id.substr(this.id.length - 1, 1);
    $(this).siblings(".active").removeClass("active");
    $(this).toggleClass('active');

    if ($('.purple-content').is(':visible')) {
        if ($('#content' + idNum).is(':visible')) {
           $(".purple-content").fadeOut();
        } else {
            $(".purple-content").fadeOut();
           $("#content" + idNum).fadeToggle();
        }
    } else {
        $("#content" + idNum).fadeToggle();
    }
});
于 2013-10-15T14:50:25.690 に答える