时间戳

首页 > 解决方案 > event.target 的脚本修订

javascript - event.target 的脚本修订

问题描述

我是 js 的新手，有人可以看看这段代码并告诉我它是否正确，是否可以改进以及如何改进？它按预期工作，但老实说，我不知道它是否写得好。提前致谢 （：

           <script>
               $(document).ready(function() {

                   $("button").click(function(event) {

                       var a = (event.target).classList.item(0);
                       var b =  ".carousel" + "." + a ;

                       $(b).myfunction;

                   });
               });
           </script>

该脚本的原因是我在自定义弹出模式内的 Slider（“JQuery lightSlider”）中有一个 Carousel（Bootsrap），我不希望 imgs 轮播仅在轮播可见时才在页面开始时加载。

脚本的作用是“存储”被点击的按钮元素（“custom-n”）的类名，然后编写.carousel.custom-x 存储在变量b中，然后使用var b作为选择器调用用于将 data-src 替换为 src 的自定义 n 轮播的函数。

我希望这不会令人困惑哈哈

这是对 html 的简化，只要<button>单击 a，就会打开模式。这是主滑块（light-slider）的一种“缩略图”，因此： <button class="custom-1">打开模态并将“light-slider”设置为滑动 n1 <button class="custom-2">打开模态并将“light-slider”设置为滑动 n2 等等上。

lightslider幻灯片内的轮播它们都有img和data-src，想法是用应该与自定义“相关”的轮播的src替换data-src


   <div class="light-slider-buttons">
       <button class="custom-1 myclass"></button>
       <button class="custom-2 myclass"></button>
       <button class="custom-3 myclass"></button>
   </div>
   

   <div class="modal-wrp">
      <div class="modal-inner">
        <ul id="light-slider">
          <li>
            <div class="slide-wrapper">
                      
              <div class="carousel custom-1">                                                    
                <div class="carousel-inner">
                  <div class="carousel-item active">
                  <img data-src="...">
                  </div>
                  <div class="carousel-item">
                  <img data-src="...">
                  </div>
                    <div class="carousel-item">
                  <img data-src="...">
                  </div>
                </div>                           
              </div>
                       
            </div>
          </li>
               
        </ul>

      </div>


   </div>

标签： javascripthtmljqueryslidercarousel

解决方案

代码看起来不错。

我有两个建议。

首先，您似乎正在使用class属性来存储数据（custom-1等）

为什么不将其设置为data-item-class属性（任何以开头的名称data-都可以）？

   <div class="light-slider-buttons">
       <button class="myclass" data-item-class="custom-1"></button>
       <button class="myclass" data-item-class="custom-2"></button>
       <button class="myclass" data-item-class="custom-3"></button>
   </div>

该值可以读作event.target.dataset.itemClass（item-class成为itemClass，有关更多信息，请参阅文档）。

变量的代码a将替换为：

var a = event.target.dataset.itemClass;

其次，为选择器设置click事件处理程序'button'太宽。

button当将来将具有其他用途的新元素添加到您的页面时，它将导致错误。

<div class="light-slider-buttons">将其视为包装button元素并将click处理程序仅应用于这些元素的组件要安全得多。

$(".light-slider-buttons button").click(function(event) {
...
}

它没有太大变化，但很重要，因为如果您在外部添加其他按钮，<div class="light-slider-buttons">它们将不会获得click事件处理程序。

jQuery 使用 CSS 选择器语法，您可以在docs中找到更多信息。

script这是标签的推荐代码

           <script>
               $(document).ready(function() {

                   $(".light-slider-buttons button").click(function(event) {

                       var a = event.target.dataset.itemClass;
                       var b =  ".carousel" + "." + a ;

                       $(b).myfunction;

                   });
               });
           </script>

PS jQuery 编程风格是非常必要的（指定页面应该如何更新每个事件）。

还有其他构建 UI 的方法，例如在React编程中是声明式的（根据给定的输入/状态指定 UI 的外观）

推荐阅读