使用1個事件多用途

我有按鈕這樣的：使用1個事件多用途

<input class="btnRating" type="button" value="Project Rate" /> 

<input class="btnRating" type="button" value=" Education Rate" /> 

<input class="btnRating" type="button" value="Achievement Rate" />

我想用3個按鍵，根據不同的點擊，不同的目的

，並在一個事件，我想這樣寫：

// Event For Open Modal Pop for rating 
$('.btnRating').on("click", function (ele) { 

if(thisbutton ==Project) 
{ 
// do something for project related 
} 

if(thisbutton ==Education) 
{ 
// do something for Education related 
} 

if(thisbutton ==Achievement) 
{ 
// do something for project related 
}

}）;

我該如何寫這樣的事件？

來源

2013-12-16 patel

爲什麼不給他們不同的ID並分別附加處理程序？或者只是檢查'this.value'？ – Manishearth

'if（$（this）.val（）==「.....」）{.. do this ..}' –

我不想創建3個活動，它只是我好奇的，爲什麼不我是這樣寫的嗎？ – patel

如果單擊每個按鈕都有完全不同的後果

，如果它們是由不同的事件來處理這更合乎邏輯。不同的含義，他們不會分享他們的大部分代碼。即使你不想寫三個事件（爲什麼？它是相同數量的代碼行），它更適合用例。

如果點擊每個按鈕具有相似的後果

這似乎是你的情況下，由於所有的按鈕都在他們的名字「速率」。如果是這樣，你是對的，你應該只有一個事件，因爲大部分代碼將是相同的。但是，如果您爲按鈕添加data-屬性，而不是使用不同的代碼路徑（if/else或開關），那麼通過使用這些屬性中的值，相同的代碼可以以不同的方式運行。假設它們之間唯一的區別是「速率乘數」。你可以這樣做：

<input type="text" id="costToMultiplyByRate" /> 
<input class="btnRating" type="button" value="Project Rate" data-rate="5" /> 
<input class="btnRating" type="button" value=" Education Rate" data-rate="4" /> 
<input class="btnRating" type="button" value="Achievement Rate" data-rate="10" /> 

$('.btnRating').on("click", function (ele) { 
    var rate = ele.getAttribute("data-rate"); 
    var cost = document.getElementById("costToMultiplyByRate"); 
    alert(rate * cost); 
}

但是，如果只加一個或兩個數據的屬性，你不能讓三個按鈕使用完全相同的代碼，我建議你使用多個事件。

來源

2013-12-16 11:52:23

嘗試

$('.btnRating').on("click", function (ele) { 
    if (this.value.indexOf('Project') > -1) { 
     // do something for project related 
    } else if (this.value.indexOf('Education') > -1) { 
     // do something for Education related 
    } else if (this.value.indexOf('Achievement') > -1) { 
     // do something for project related 
    } 
});

來源

2013-12-16 11:19:42

小心解釋downvotes –

好吧，首先，我不是downvoter在這裏......但你不覺得， indexOf'，比較這些值遠遠更好**可讀** ...無論如何，您必須在兩種情況下編寫「corrrespoding值」。 'this.value.indexOf（'Project'）> -1' || 'this.value =='Project'' – bipen

我做了downvote ..給@bipen的解釋綽綽有餘..如果你想改變你的值，會發生什麼，那麼你也需要改變你的JS代碼。 –

可以測試CButton的價值

$('.btnRating').on("click", function (ele) { 
    if (this.value == 'Project Rate') { 
     // do something for project related 
    } else if (this.value == ' Education Rate') { 
     // do something for Education related 
    } else if (this.value == 'Achievement Rate') { 
     // do something for project related 
    } 
});

更好的解決方案是有按鈕的唯一選擇和編寫不同的處理程序爲每一個

來源

2013-12-16 11:19:49

嘗試：

$('.btnRating').on("click", function (ele) { 
    var val = $(this).val(); 
    if(val == "Project Rate"){ 
    } 
    else if(val == " Education Rate"){ 
    } 
    else if(val == "Achievement Rate"){ 
    } 
});

來源

2013-12-16 11:19:50 Hiral

我建議添加類按鈕

<input class="btnRating project" type="button" value="Project Rate" /> 

<input class="btnRating education" type="button" value=" Education Rate" /> 

<input class="btnRating Achievement" type="button" value="Achievement Rate" />

然後用分離事件

$('.btnRating.project').on("click", function (ele) { 
// do something for project related 
});

來源

2013-12-16 11:22:00 cosset

附加屬性：data-event

<input class="btnRating" type="button" value="Project Rate" data-event="project" />

然後u可以使用一個開關

$('.btnRating').on("click", function (ele) { 
    switch($(this).data("event")) { 
     case "project" : 
      //fire your function 
      break; 
    } 
}

來源

2013-12-16 11:22:28

能否請您試試這個，

在HTML部分：

<input class="btnRating" id="ProjectRate" type="button" value="Project Rate" /> 

    <input class="btnRating" id="EducationRate" type="button" value=" Education Rate" /> 

    <input class="btnRating" id="AchievementRate" type="button" value="Achievement Rate" />

腳本：

<script> 
    $(function(){  
     // Event For Open Modal Pop for rating 
     $('.btnRating').click(function (ele) { 

      var thisbutton = $(this).attr('id'); 

      if(thisbutton =="ProjectRate") 
      { 
      // do something for project related 
      }else if(thisbutton =="EducationRate") 
      { 
      // do something for Education related 
      }else if(thisbutton =="AchievementRate") 
      { 
      // do something for project related 
      }else{ 
      // do your default 
       }   
     }); 
    }); 

</script>

來源

2013-12-16 11:22:33

<input class="btnRating" type="button" data-action="project" value="Project Rate" /> 
<input class="btnRating" type="button" data-action="education" value=" Education Rate" /> 
<input class="btnRating" type="button" data-action="achievement" value="Achievement Rate" /> 

$(".btnRating").click(function() { 
    var action = $(this).attr("data-action"); 
    if (action === "project") { 
     // do project 

    } else if (action === "education") { 
     // do education 
    } 
});

這樣你就可以對按鈕，任何值（文本），其如果您希望將來將您的網站全球化，那就太好了。

來源

2013-12-16 11:23:34 Catalin

$('.btnRating').click(function (ele) { 

if($(this).val()=="Project Rate") 
{ 
// do something for project related 

} 

else if($(this).val() =="Education Rate") 
{ 
// do something for Education related 

} 

else if($(this).val() =="Achievement Rate") 
{ 
// do something for project related 

} 

});

這裏演示http://jsfiddle.net/3Mf3j/

來源

2013-12-16 11:23:36

試試這個：

$('.btnRating').on("click", function (ele) { 
    var value = $(this).val(); 

    if(value.indexOf("Project Rate") != -1) 
    { 
     // do something 
    } 
    else if(value.indexOf("Education Rate") != -1) 
    { 
     // do something 
    } 
    else if(value.indexOf("Achievement Rate") != -1) 
    { 
     // do something 
    } 
});

來源

2013-12-16 11:24:09 Prateek

使用event.delegate http://api.jquery.com/delegate/ - 像http://jsfiddle.net/aamir/zw27q/2/

我會建議使用唯一的CSS類爲每個按鍵猶如你改變每個輸入的值，你也必須改變你的JS。所以，不是檢查val=='Project Rate你應該檢查$this.hasClass('rateProj')

$(".btns").delegate("input", "click", function() { 
    var $this = $(this), 
     val = $this.val(); 

    if (val =='Project Rate') { 
     //code 
    } 
    //more if statements 
});

來源

2013-12-16 11:27:52

我建議你使用數據屬性來實現這一目標。因爲比較字符串可能會導致更多時間檢查...

我已經爲此創建了jsfiddle。

http://jsfiddle.net/x4yyp/2/

$(document).on("click", ".btnRating", function() { 
    var optionValue = $(this).data("optionvalue"); 
    if(optionValue == 1) 
    { 
     alert("hello"); 
    } 
    else if(optionValue == 2) 
    { 
     alert("your name"); 
    } 
    else if(optionValue == 3) 
    { 
     alert("your email"); 
    } 

});

來源

2013-12-16 11:28:39

這將幫助你

$(document).ready(function(e) { 
    $('.btnRating').on("click", function (ele) { 
     var btnType = $(this).val(); 
     switch(btnType) { 
      case 'Project Rate': 
        // your action; 
       break; 
      case ' Education Rate': 
       // your action; 
       break; 
      case 'Achievement Rate': 
       // your action; 
       break; 
     } 
    }); 
});

來源

2013-12-16 11:33:27

使用1個事件多用途

回答

相關問題