如果/否則不與event.target選擇器一起使用

Question

我有三個按鈕。 單擊一個應該做一件事，單擊第二個應該做另一件事，依此類推。

當您單擊任何按鈕時，我在控制台中看到了相同的消息，但我不希望看到此消息。 我的if / else邏輯是否有問題，還是有其他因素影響結果？

index.js：

$(document).on("click", ".dtAddClass-rolesgrid", disp._newRole);

$(document).on("click", ".dtAddClass-srchgrid", disp._newRole);

$(document).on("click", ".dtAddClass-additionalsrchgrid", disp._newRole);

JS代碼段：

_newRole(e) {
    $("#dialog-form fieldset > #activate-button").hide();
    $("#dialog-form fieldset > #deactivate-button").hide();
    dialog.dialog({ title: "Add New Search/Role Filled" });
    dialog.dialog("open");

    if ($(e.target.tagName === ".dtAddClass-rolesgrid")) {
        myClass._AddNewRoleFilled();
        console.log('this is rolesgrid') // clicking on any of the buttons only shows this message
    } else if ($(e.target.tagName === ".dtAddClass-srchgrid")) {
        console.log('this is srchgrid');
    } else if ($(e.target.tagName === ".dtAddClass-additionalsrchgrid")) {
        console.log('this is addtsrchgrid');
    } else {
        console.log('this is e: ' + e)
    }
}   

按鈕的創建方式：

let _gridNew = _grid.substring(1);
var table = $(_grid).DataTable({
    buttons: [
    {
        text:      '<i class="fa fa-plus"></i>',
        titleAttr: 'Add',
        className: 'dtAddClass-' + _gridNew
    },

---

更新的代碼：

if ($('div').hasClass("dtAddClass-rolesgrid")) {
    myClass._AddNewRoleFilled();
    console.log('this is rolesgrid');
} else if ($('div').hasClass("dtAddClass-srchgrid")) {
    console.log('this is srchgrid');
} else if ($('div').hasClass("dtAddClass-additionalsrchgrid")) {
    console.log('this is addtsrchgrid');
} else {
    console.log('this is e: ' + e)
}   

Answer 1

在這里，嘗試這樣的事情。

$(document).on("click", ".dtAddClass-rolesgrid", onClick);
$(document).on("click", ".dtAddClass-srchgrid", onClick);
$(document).on("click", ".dtAddClass-additionalsrchgrid", onClick);

function onClick(e) {
  const el = $(this);
  if (el.hasClass('dtAddClass-rolesgrid')) {
    console.log('this is rolesgrid')
  } else if (el.hasClass('dtAddClass-srchgrid')) {
    console.log('this is srchgrid');
  } else if (el.hasClass('dtAddClass-additionalsrchgrid')) {
    console.log('this is addtsrchgrid');
  } else {
    console.log('this is e: ' + this)
  }
}

在jQuery click函數中，您使用$(this)而不是e.target獲得單擊的元素。 另外，使用jQuery方法hasClass ， tagName是元素的標簽名稱，例如div或span 。

或者使事情更簡單：

 $('.dtAddClass-rolesgrid').click(function() { alert('this is rolesgrid') }) $('.dtAddClass-srchgrid').click(function() { alert('this is srchgrid') }) $('.dtAddClass-additionalsrchgrid').click(function() { alert('this is additionalsrchgrid') }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dtAddClass-rolesgrid"> Rolesgrid </div> <div class="dtAddClass-srchgrid"> Srchgrid </div> <div class="dtAddClass-additionalsrchgrid"> Additionalsrchgrid </div>