將元素的ID分配給.hover（）上的變量以用於單擊事件

Question

我的頁面上有12個元素（但是下面我只寫了3個代碼）。當點擊一個，其他11消失（使用稱爲'spinOut'的動畫）。我不希望爲每個單獨的元素編寫單擊運行的代碼，而是希望在懸停時將元素的id分配給$test變量，然後在點擊時單擊$test（元素懸停），我的代碼將被執行爲那個元素。因此，我只需寫出一個代碼塊，將其應用於$test，這意味着它將應用於任何被點擊的元素。

我想爲.hover（）函數中的變量$ test賦值，然後在外部使用它。我發現很多人都有類似的問題，但沒有解決問題的解決方案對我有幫助。我想知道如何在.hover（）函數中分配$test變量，然後在外部使用它。

$(document).ready(function() { 
    var $test; 

    $("#M").hover(function() { 
     $test = "#M"; 
    }); 
    $("#N").hover(function() { 
     $test = "#N"; 
    }); 
    $("#O").hover(function() { 
     $test = "#O"; 
    }); 

    //When I define variable value here it works 
    $($test).click(function() { 
     $(".pageItem:not("+$test+")").addClass("spinOut"); 
    }); 
}); 

Answer 1

這是我如何得到它的工作。我的頁面上的所有部分「.pageItem」類的12個元素。我沒有在$().click指定特定元素 - 我只是在被點擊任何.pageItem運行代碼，然後使用$test變量的函數內的目標已被點擊的.pageItem。該代碼將應用於最後一次徘徊的元素 - 無法先點擊其中一個元素，而無需先點擊它們。

$("#M").hover(function() { 
    $test = "#M"; 
}); 
$("#N").hover(function() { 
    $test = "#N"; 
}); 
$("#O").hover(function() { 
    $test = "#O"; 
}); 
$(.pageItem).click(function() { 
    $(".pageItem:not("+$test+")").addClass("spinOut"); 
}); 

但是，做什麼，我需要一個更簡單，更合理的方式。相反，與.pageItem我最後一次上徘徊的ID填充$test，並用它來指定我點擊了什麼，我給你$(this).attr("id")到$test內。點擊（）函數如下：

$(.pageItem).click(function() { 
    $test = $(this).attr("id"); 
    $(".pageItem:not("+$test+")").addClass("spinOut"); 
}); 

Answer 2

你不能這樣做，因爲當設置觸發器時單擊該元素不存在（因爲它是空的）。一種方式做到這一點：

$(document).ready(function() { 
     var $test = ''; 
     $("#M").hover(function() { 
      $test = "#M"; 
     }); 

     $(document).on('click', $test, (function() { 
      if ($test) 
       console.log($test); 
     }); 
}); 

編輯：另一種方式來做到這一點：

$(document).ready(function() { 
     var $test = ''; 
     $("#M").hover(function() { 
      // for future use if needed 
      $test = "#M"; 

      $(this).unbind('click').click(function() { 
       console.log($test); 
      }); 
     }); 
}); 

Answer 3

$(document).ready(function() { 
    $("#M").hover(function() { 
     $test = "#M"; 
     eventClick($test, function() { console.log($test); }); 
    }); 

    var eventClick=function(ele, f) { 
     $(ele).unbind('click'); 
     $(ele).click(f); 
    }; 

}); 

Answer 4

這聽起來像你想要一個單擊處理程序只重視你已經元素盤旋。有很多方法可以做到這一點。這裏有一個：

$(document).ready(function() { 
 
     $('.clickable').on('mouseenter', function() { 
 
      $(this).data('can-click', true); 
 
     }).on('mouseleave', function() { 
 
      $(this).data('can-click', false); 
 
     }); 
 
     $(document).on('click', function (e) { 
 
      var currentTarget = $(e.target); 
 
      if (currentTarget.data('can-click')) { 
 
       console.log('clicked'); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="M" class="clickable">M</div> 
 
<div id="O">O</div>

技術上講，這聽來對整個文件的任何點擊事件，但只是反應那些正在上空盤旋。它通過將可「點擊」的元素標記爲可用於僅在懸停時單擊來工作。當用戶點擊時，代碼會在繼續執行代碼之前檢查該標記。

Answer 5

只是假設你點擊的內容的類型「按鈕」的「輸入」你可以做這樣的事情，有可能。

$(document).ready(function() { 
    var $test = ''; 
    $("#M").hover(function() { 
     $test = "#M"; 
    }); 

    $("input[type=button]").on('click', function (e) { 
     console.log($test); 
    }); 
}); 

如果我的假設是不正確，那麼這個可能的解決方案可能無法工作或可能需要改變。

只是一個念頭