Question

我有一些页面上有多个pupup，所以当用户点击预览时 - 出现正确的全图。这是html：

    <tr class="rowLicense">
 <td class="bigPop licensePopUp" ><img src="images/license/license_1.jpg"></td>
 <td class="bigPop licensePopUp2"><img src="images/license/license_2.jpg"></td>
 <td class="bigPop licensePopUp3"><img src="images/license/license_3.jpg"></td>
    </tr>

这是＆＃39;如果＆＃39;脚本的版本：

 $(".bigPop").click(function(){
            if ($(this).is(".licensePopUp")){ //заменить на свитч
                $(".popupLicense").fadeIn();
           }
            else if ($(this).is(".licensePopUp2"))  {
                $(".popupLicense2").fadeIn();
            }
            else if ($(this).is(".licensePopUp3"){
                     $(".popupLicense2").fadeIn();
            }
        });

它有效，但似乎不是最佳的

我尝试使用＆＃39; switch＆＃39;，这是代码：

  $(".bigPop").click(function(){
              var i = $(this).is();
                switch (i) {
                    case (".licensePopUp"): 
                         $(".popupLicense").fadeIn();
                    break;
                    case (".licensePopUp2"):
                        $(".popupLicense2").fadeIn();
                    break;
                          }

        });

它不起作用，我想我在定义＆＃39; i'或者声明声明时犯了一些错误，但我找不到线索。

P.S。请不要怪我，我刚开始学习js，所以不要知道很多明显的事情。

Answer 1

如果使用某种特定弹出窗口的数据属性，则可以显着简化代码：

<td class="bigPop" data-target=".licensePopUp"><img src="images/license/license_1.jpg"></td>
<td class="bigPop" data-target=".licensePopUp2"><img src="images/license/license_2.jpg"></td>
<td class="bigPop" data-target=".licensePopUp3"><img src="images/license/license_3.jpg"></td>

然后JS：

$(".bigPop").click(function () {
    $($(this).data('target')).fadeIn();
});

这种方法提供了额外的灵活性，因为现在data-target可以是任何CSS选择器，不仅是类名，还有id等。

Answer 2

您可以执行此操作，不需要if或switch

$(".bigPop").click(function() {
    var num = $(this).attr("class").replace(/.*licensePopUp(\d).*/, "$1");
    $('.popupLicense' + (num ? num : '')).fadeIn();
});

上面的内容是获取类中的数字，然后使用该数字进行结束，如果数字不是数字，则只是空字符串。或者，您可以设置单独的data-*属性，然后使用该属性。

Answer 3

这个怎么样？我试图使用event.target。

 $(".bigPop").click(function(event){
          var target = $( event.target );
          target.fadeIn();

 });

注意我还没有测试过代码。

Answer 4

尝试按如下方式使用开关：

$(".bigPop").click(function(){
                var i = $(this).attr("class");
                switch (i) {
                    case "bigPop licensePopUp": 
                         $(".popupLicense").fadeIn();
                    break;
                    case "bigPop licensePopUp2":
                        $(".popupLicense2").fadeIn();
                    break;
                          }

        });

无法用jquery中的'switch'语句替换'if'语句

4 个答案: