以下链接是我目前正在处理的项目： 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>
我有两个问题：
有没有办法缩短jQuery代码？意思是，我可以使用单击处理程序来完成相同的任务，而不是使用多个点击处理程序吗？当谈到jQuery时，我仍然是一个菜鸟。
如果你注意到我有一个评论移动视图的部分（我必须为移动视图创建一个单独的文本块，因为我想在移动视口的设计中进行一些更改）。我注意到，一旦我创建了移动视图部分，上面的jQuery就停止了桌面视图的工作，只适用于移动视图，因此我不得不为移动视图重新创建具有不同ID值的jQuery代码块。
如何使相同的jQuery代码（如上所述）适用于移动视图和桌面视图？
答案 0 :(得分：3)
好的，有很多方法可以解决这个问题。这可能是也可能不是最佳方式，但我认为这是一种简单的方法。您应该使用类，以便他们可以轻松使用相同的单击处理程序，而不是使用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的原因。如果你改用类，你就不会遇到这个问题！
希望有所帮助，如果有任何问题仍然令人困惑，或者我没有正确回答您的问题，请告诉我。
答案 1 :(得分：1)
点击代码重构的一种可能方法如下，它的工作原理是你可以将类添加到类不与样式相关但被用作组标识符的元素：
现在修改你的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现在涵盖了所有按钮。