Question

我有八个可点击的图标（pulse1，pulse2 - pulse 8），它们链接到相应的内容（content1，content2等）。而不是每次为每个代码编写下面的代码有没有一种方法我可以使用增加的整数或其他东西压缩它？这款游戏相当新颖！

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>

Answer 1

您可以概括该函数，假设pulse末尾的ID号永远不会达到两位数：

$("[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();
    }
});

Answer 2

使用某种引用附加HTML，这里我给它一个data-属性，你可以点击jQuery的.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/

压缩为selector1，selector2等重复jquery代码

2 个答案: