event.target 的脚本修订

编程问答 2022-06-02

问题描述

我是 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作为一个选择器，为那个用 src 替换 data-src 的 custom-n carousel 调用函数。

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

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

lightslider 幻灯片中的轮播图，它们都有 img 和 data-src，想法是将 data-src 替换为应该与自定义“相关”的轮播图的 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>

解决方法

代码看起来不错。

我有两个建议。

首先，您似乎在使用 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;

其次，为 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>

P.S. jQuery 编程风格非常重要（指定页面应如何在每个事件上更新）。

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

carouselhtmljavascriptjquerysliderslider