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

以下链接是我当前正在从事的项目：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时，我仍然是一个菜鸟。
如果您注意到我对移动视图进行了评论（我必须为移动视图创建一个单独的文本块，因为我想要对移动视图的设计进行一些更改）。我注意到，一旦我创建了移动视图部分，上面的jQuery就停止用于桌面视图，而仅用于移动视图，因此我必须重新创建具有不同ID值的同一jQuery代码的移动视图。
如何使相同的jQuery代码（如上所述）用于移动视图和桌面视图？

好的，因此有很多方法可以解决此问题。这可能是最好的方法，但我认为这是一种简单的方法。您应该使用类，而不是使用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垃圾箱以显示一个工作示例。请注意：我删除了很多代码，只是为了简化示例：https://jsbin.com/johacetamo/edit?html，js，output

至于您的第二个问题，页面上只能有一个ID的实例。您的移动代码首先列出，因此jQuery正在找到ID的第一个实例，而忽略了第二个实例（您的非移动视图）。这就是为什么更改ID工作的原因。如果您使用类，则不会有这个问题！

希望有帮助的是，请告诉我是否有任何事情仍然令人困惑，或者我没有正确回答您的问题。

单击代码重构的一种可能的方法如下，它可以根据以下原则，即您可以将类添加到类不与样式有关的元素中添加到元素作为组标识符：

向所有按钮添加一个通用类，例如mybuttonClass
向所有Divs添加一个通用类，例如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涵盖了所有按钮。

相关内容

最新更新

热门标签：