如何使用单击处理程序而不是多个任务？

下面的链接是一个项目，我目前工作： http://feathertest.me.pn/p-indoor.php#prod-stop 如何使用单击处理程序而不是多个任务？

在上面的链接提供的，我有合适的可用的可点击的颜色列表。基于用户点击的颜色，左侧的图像会相应地改变。

以下是代码片段我用的是特殊的功能：

$(function() { 
    $('#showdiv1').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div1').show(); 
    }); 
    $('#showdiv2').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div2').show(); 
    }); 

    $('#showdiv3').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div3').show(); 
    }); 

    $('#showdiv4').click(function() { 
     $('div[id^=div]').hide(); 
     $('#div4').show(); 
    }); 
})

我的HTML代码片段：

<!-- mobile version start --> 
      <div class="row hidden-lg hidden-md hidden-sm"> 
       <div class="col-md-5 col-sm-5 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1"> 
        <p class="prod-code">FB - 329</p> 
        <p class="prod-title">Monara</p> 
        <p class="prod-desc">The best in class from our range of Indoor Brooms. This is the only broom in the market that has five rows of syntetic bristles. A "Heavy Duty" broom suitable for high dust areas.</p> 

        <div class="prod-det"> 
         <ul> 
          <li>Sweeps away more dirt at once while leaving no traces behind. </li> 
          <li>Split bristle edges for collecting fine dust.</li> 
          <li>Head enclosure constructed using the highest graded plastic material.</li> 
          <li>Uniform Italian handle thread.</li> 
          <li>Angled edges to reach corners.</li> 
          <li>150g of high quality synthetic bristles with excellent bend recovery for prolonged usage.</li> 
         </ul> 
        </div> 

        <br> 
        <div class="color-change"><b>Colours Available:</b></div> 
        <div class="color-box"> 
         <a id="tmonara-showdiv1" class="cb-pp" href="p-indoor.php#prod-stop" title="Purple"></a> 
         <a id="tmonara-showdiv2" class="cb-b" href="p-indoor.php#prod-stop" title="Black"></a> 
         <a id="tmonara-showdiv3" class="cb-o" href="p-indoor.php#prod-stop" title="Orange"></a> 
         <a id="tmonara-showdiv4" class="cb-p" href="p-indoor.php#prod-stop" title="Pink"></a> 
        </div> 
        <br><br> 
        <p class="color-change"><i>(click to change colors of product)</i></p> 
       </div> <!-- prod details end --> 
      </div> 
      <!-- mobile version end --> 

      <div id="feather-prods" class="row"> 

       <div id="div1"> 
       <div id="monara-purple" class="col-md-5 col-sm-6 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1"> 
        <div class="prod-img"><img class="bigImg" src="images/broom/monara-pp-1.jpg" alt="feather, Purple monara broom"></div> 

        <div class="thumbnailImg"> 
         <div class="thumb"><img src="images/broom/monara-pp-1.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb"><img src="images/broom/monara-pp-2.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb"><img src="images/broom/monara-pp-3.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb"><img src="images/broom/monara-pp-4.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
        </div> 
       </div> 
       </div> <!-- prod 1 end --> 

       <div id="div2" style="display:none;" > 
       <div id="monara-green" class="col-md-5 col-sm-6 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1"> 
        <div class="prod-img"><img class="bigImg2" src="images/broom/monara-g-1.jpg" alt="feather, green monara broom"></div> 

        <div class="thumbnailImg"> 
         <div class="thumb2"><img src="images/broom/monara-g-1.jpg" alt="feather, green monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb2"><img src="images/broom/monara-g-2.jpg" alt="feather, green monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb2"><img src="images/broom/monara-g-3.jpg" alt="feather, green monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div class="thumb2"><img src="images/broom/monara-g-4.jpg" alt="feather, green monara broom" border="0" width="100%" class="thumbImg" /></div> 
        </div> 
       </div> 
       </div> <!-- prod 2 end --> 

<div class="col-md-5 col-sm-5 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1 hidden-xs"> 
        <p class="prod-code">FB - 329</p> 
        <p class="prod-title">Monara</p> 
        <p class="prod-desc">The best in class from our range of Indoor Brooms. This is the only broom in the market that has five rows of syntetic bristles. A "Heavy Duty" broom suitable for high dust areas.</p> 

        <br> 
        <div class="color-change"><b>Colours Available:</b></div> 
        <div class="color-box"> 
         <a id="monara-showdiv1" class="cb-pp" href="p-indoor.php#prod-stop" title="Purple"></a> 
         <a id="monara-showdiv2" class="cb-g" href="p-indoor.php#prod-stop" title="Green"></a> 
         <a id="monara-showdiv3" class="cb-b" href="p-indoor.php#prod-stop" title="Black"></a> 
         <a id="monara-showdiv4" class="cb-o" href="p-indoor.php#prod-stop" title="Orange"></a> 
         <a id="monara-showdiv4" class="cb-p" href="p-indoor.php#prod-stop" title="Pink"></a> 
        </div> 
        <br><br> 
        <p class="color-change"><i>(click to change colors of product)</i></p> 

        <div class="prod-det"> 
         <ul> 
          <li>Sweeps away more dirt at once while leaving no traces behind. </li> 
          <li>Split bristle edges for collecting fine dust.</li> 
          <li>Head enclosure constructed using the highest graded plastic material.</li> 
          <li>Uniform Italian handle thread.</li> 
          <li>Angled edges to reach corners.</li> 
          <li>150g of high quality synthetic bristles with excellent bend recovery for prolonged usage.</li> 
         </ul> 
        </div> 
       </div> <!-- prod details end --> 
</div>

我有2个问题：

有没有一种缩短jQuery代码的方法？这意味着，我可以使用一个点击处理程序来实现相同的任务，而不是使用多个点击处理程序？当谈到jQuery时，我仍然是一个noob。
如果您发现我有移动视图的注释部分（我必须为移动视图创建单独的文本块，因为我需要对移动视口的设计进行一些更改）。我注意到，一旦我创建了移动视图部分，上面的jQuery就停止了桌面视图的工作，并且只能在移动视图中工作，因此我必须为移动视图重新创建具有不同ID值的同一块jQuery代码。

如何让相同的jQuery代码（如上所述）适用于移动视图和桌面视图？

来源

2016-12-24 Hazra Hameed

好所以有大量的方法来解决这个问题。这可能是也可能不是最好的方式，但我认为这是一个简单的方法。您应该使用类，以便他们可以轻松使用相同的点击处理程序，而不是使用ID。然后，您可以将数据属性添加到颜色选项以与说明中的类相对应。所以这个：

<a id="tmonara-showdiv1" class="cb-pp" href="p-indoor.php#prod-stop" title="Purple"></a>

会变成这样：

<a class="tmonara cb-pp" href="p-indoor.php#prod-stop" title="Purple" data-color="purple"></a>

而且这样的：

<div id="div1"></div>

会变成这样：

<div id="div1" class="description purple"></div>

然后jQuery代码看起来像这样：

$('.tmonara').click(function() { 
     var colorClicked = $(this).data('color'); 
     $('.description').hide(); 
     $('.description.' + colorClicked).show(); 
    });

我创建了这个JS Bin来显示一个工作示例。请注意：我删除了大量的代码只是为了简化的例子： https://jsbin.com/johacetamo/edit?html,js,output

关于你的第二个问题，只能有一个页面上的ID的一个实例。您的移动代码是首先列出的，所以jQuery正在查找ID的第一个实例并忽略第二个实例（您的非移动视图）。这就是改变ID的原因。如果你使用类，你不会有这个问题！

希望有帮助，请让我知道是否有任何问题仍然令人困惑，或者如果我没有正确回答您的问题。

来源

2016-12-24 09:40:46

投了一个比我更完整的答案。 –

谢谢@VanquishedWombat :) –

@JuliaNething一切工作！非常感谢！！！！：D –

的点击代码的重构一种可能的方法是如下，它工作的原理是，当类不符合的造型做，但作为一个组标识符可以添加类的元素：

为所有按钮添加一个通用类，例如myButtonClass
为所有div添加通用类，例如myDiv
修改您的代码，使关联的图片具有与控件按钮ID相匹配的类。例如按钮＃showdiv1给＃div1一个额外的类，如class =“＃showdiv1”。

现在修改您的jquery，如下所示：。

$(".myButtonClass").on("click", function(e){ 

    // hide all the divs 
    $(".myDiv").hide() 

    // show the div with class matching button element id attr 
    $("." + $(this).prop("id")).show()  

})

这个jQuery现已覆盖了所有的按钮。

来源

2016-12-24 09:42:50

如何使用单击处理程序而不是多个任务？

回答

相关问题