event.target 的脚本修订

Question

我是 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”）中有一个轮播（Bootsrap），我不希望 imgs 轮播仅在轮播会在页面开始时加载可见。

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

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

这是对 html 的简化，只要单击 <button>，就会打开模式。 这是主滑块（轻滑块）的“缩略图”，所以： <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>

Answer 1

代码看起来不错。

我有两个建议。

首先，您似乎在使用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，有关详细信息，请参阅docs）。

变量a的代码将被替换为：

var a = event.target.dataset.itemClass;

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

如果将来将具有其他用途的新 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>

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

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