我是使用 switch 还是 if else 来简化这个？ jQuery

Question

我尝试同时使用 switch 和 if else，但无法正常工作。我不想重复这么多次。

        $('div.ui-widget-content').on("click", ".date-edit", function () {
            var dateInput = jQuery(this).html("");
            $(".pop-up-box-date").dialog(dateInput);
        });

        $('div.ui-widget-content').on("click", ".radio-edit", function () {
            var radioInput = jQuery(this).html("");
            $(".pop-up-box-radio").dialog(radioInput);
        });

        $('div.ui-widget-content').on("click", ".checkbox-edit", function () {
            var checkboxInput = jQuery(this).html("");
            $(".pop-up-box-checkbox").dialog(checkboxInput);
        });

        $('div.ui-widget-content').on("click", ".dropdown-edit", function () {
            var dropdownInput = jQuery(this).html("");
            $(".pop-up-box-dropdown").dialog(dropdownInput);
        });

        $('div.ui-widget-content').on("click", ".telephone-edit", function () {
            var telephoneInput = jQuery(this).html("");
            $(".pop-up-box-telephone").dialog(telephoneInput);
        });

        $('div.ui-widget-content').on("click", ".button-edit", function () {
            var buttonInput = jQuery(this).html("");
            $(".pop-up-box-button").dialog(buttonInput);
        });

        $('div.ui-widget-content').on("click", ".textarea-edit", function () {
            var textareaInput = jQuery(this).html("");
            $(".pop-up-box-textarea").dialog(textareaInput);
        });

我对此很陌生，所以如果有更好的方法我不知道请告诉我。谢谢

这是 HTML 块之一：

<div class='pop-up-box-text' style='display: none;' Title="Edit Text Box">
    <p id="textTitle" class="pop-up-copy">Title</p><p class="pop-up-inputs"><input type='text' /></p>
    <p class="pop-up-copy">Textbox Placeholder</p><p class="pop-up-inputs"><input id="textbox" type='text' /></p>
    <div class="submit"><button id="subimt" class="submit">Submit</button></div>
</div>

编辑位于此 html 替换：

case 'btntype_text':
    jQuery('.ui-widget-content .' + fieldClass).html("
           <div class='drop-blank'>
              <p>Text Box</p>
              <div class='li-float'>
                  <input id='textPlaceholder' type='text' placeholder='Text' disabled/>
              </div>
              <div class='text-edit'></div>
              <div class='delete'></div>
           </div>");
    fieldType = "text";
    break;

Answer 1

这样做的一种方法是这样的：

$('div.ui-widget-content').on("click", function (e) {
   var target = $(e.target);
   if (target.is('.date-edit')) {
     // handle case
   } else if (target.is('.radio-edit')) {
     // handle case
   }
});

Switch 语句也可以，实际上更好。

Answer 2

您可以简化仅检查父元素的代码，然后使用特定的 class 来调用您的函数。也可以使用正则表达式更简洁

$('div.ui-widget-content').on("click", function (e) {
   var name = e.target.className.match(/\.(.*)\-/)[1];
   $(".pop-up-box-" + name).dialog(e.target.innerHTML); // or whatever you want
});

Answer 3

假设您的命名约定是一致的，您可以这样做：

$('div.ui-widget-content').on("click", "[class$=edit]", function () {
     var input = jQuery(this).html("");
     $(".pop-up-box-" + this.className.match(/(\w+)-edit/)[1]).dialog(input);
});

我假设您要捕获以 "edit" 结尾的 classes，因此我们使用 ending-with 选择器并使用一些基本的正则表达式来获取特定的 class 名称。

Answer 4

假设 HTML 是这样的：

<div class="ui-widget-content">
    <div class="edit date-edit"></div>
    <div class="content pop-up-box-date"></div>
</div>

您可以使用 each() 一次处理它们：

$('div.ui-widget-content .edit').each(function () {
    $(this).click(function () {
        $(this).siblings('.content').dialog( $(this).html() );
    });
});

Answer 5

给你的元素一条毯子class，你可以用它来一口气瞄准它们
使用 data-* 属性定义您将使用的弹出窗口。

如果您的编辑按钮标记看起来（类似于）：

<button class="date-edit edit-button" data-popup="date">..</button>
<button class="radio-edit edit-button" data-popup="radio">..</button>
<!-- etc.. -->

您的 jQuery 将变为：

$('div.ui-widget-content').on("click", ".edit-button", function () {
    var $this = $(this),
        popup = $this.attr('data-popup');

    $(".pop-up-box-" + popup).dialog( $this.html() );
});

已注意到，但您使用的是 .html() 的 'setter' 版本，我认为您的意思是使用 'getter' 版本。

Answer 6

这些都是很好的答案。让我使用关联数组提供我自己的一个。

使用此方法，您将不需要使用任何条件运算符。你的函数只写一次，你的选择器也是如此。 输入选择器 指的是将分配给点击处理程序的元素。 target 指的是将接收输入的元素。

此方法还允许您抽象化您的功能并简单地维护一个配对选择器列表。您可以根据需要使列表变长或变短，而无需修改代码。

代码

// Associative array of { input selector : target };
var target_classess = {
    ".date-edit" : ".pop-up-box-date",
    ".radio-edit" : ".pop-up-box-radio",
    ".checkbox-edit" : ".pop-up-box-checkbox",
    ".dropdown-edit" : ".pop-up-box-dropdown",
    ".telephone-edit" : ".pop-up-box-telephone",
    ".button-edit" : ".pop-up-box-button",
    ".textarea-edit" : ".pop-up-box-textarea"
};

// Gets keys of associative array as selectors.
var selectors = Object.keys(target_classes);

// Iterate through associative array.
for (i=0,c=target_classes.length;i<c;i++) {

    // Get this iteration's input selector.
    var selector = selectors[i];

    // Assign click handler for input selector.
    $('div.ui-widget-content').on("click", selector, function () {

        // Clear HTML, cache reference to element.
        var input = jQuery(this).html("");

        // Assign to target.
        $(target_classes[selector]).dialog(input);
    });    
}

虽然与您的问题没有直接关系，但也值得一提（其他人也有）：

$.click() 函数代替 $.on() 会简化您的代码并且
行 = jQuery(this).html("") 将在返回对 this.

我是使用 switch 还是 if else 来简化这个？ jQuery

Do I use a switch or if else to simplify this? jQuery

jquery

repeat

simplify