为选择器 1、选择器 2 等压缩重复的 jquery 代码答案

【问题标题】：Condensing repeating jquery code for selector1, selector2 etc为选择器 1、选择器 2 等压缩重复的 jquery 代码
【发布时间】：2013-10-15 23:14:02
【问题描述】：

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

开发版见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>

【问题讨论】：

您能否举例说明构成其中一个部分的 html 以及它与另一个部分的关系？
给你的链接和内容区域一个公共类，给每个内容区域一个ID，它以某种方式实际代表内容（不是content1，content2等），然后给你的链接一个href="#theid"现在您可以从链接的 href 中获取内容区域的 id 并显示它，然后隐藏其余部分。
嗨，Kevin，我添加了一个指向开发版本的链接以及脉冲链接到的内容...干杯！

标签： javascript jquery optimization jquery-selectors

【解决方案1】：

附加带有某种引用的 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/

【讨论】：

谢谢，相应的 data-contentref 是否需要同时附加到按钮 (#pulse) 和内容上？试过了，但似乎无法正常工作！
我添加了一个小提琴，让您了解如何使用 Classes 和 .data() ids =) jsfiddle.net/7JvFZ/3

【解决方案2】：

你可以概括这个函数，假设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();
    }
});

【讨论】：