Jquery Onclick والإشارة إلى الكائن الذي تم النقر عليه

Question

لقد حصلت على تعبير jQuery التالي، داخل الوظيفة أحتاج إلى مرجع للكائن الذي تم النقر عليه، هل هناك طريقة للقيام بذلك؟

$('#tagList li').click(function() {
  /* contents */
});

Answer 1

استخدم

$(this)

Answer 2

يمكنك استخدام قيمة الإرجاع

$("#tagList li").bind("click", function(e) {
    alert(e.currentTarget + ' was clicked!');
});

أو إذا أردت، يمكنك الإشارة ببساطة إلى الكائن في وضع jQuery

$("#tagList li").bind("click", function(e) {
    alert($(this) + ' was clicked!');
});

إذا كنت جديدًا في استخدام jQuery، أقترح بشدة لك أن ترى بعض لقطات الشاشة من ريمي شارب في مسج للمصممين, ، من الرائع أن يفهموا القليل عن كيفية عمل jQuery، والأفضل من ذلك، كيفية استخدام console.log() من أجل رؤية الأشياء التي يمكنك استخدامها!

Answer 3

نعم، الكلمة الرئيسية this يحيل الى عنصر DOM التي تم النقر. يمكنك "التفاف" على هذا النحو:

$(this)

وهذا سوف يسمح لك التعامل معها على أنها كائن مسج.

Answer 4

و <م> هذه الكلمة هو ما كنت تبحث عنه. في كثير من الأحيان سوف تحتاج إلى تطبيق وظيفة مسج ل<م> هذه للقيام بعملك. مثال:

$('#tagList li').click(function() {
  $(this).css({ color: 'red' });
});

Answer 5

وإضافة إجابة جديدة من شأنها أن تغطي المزيد من حالات الاستخدام، وتحديدا عندما تريد استخدام وظائف السهم.

وانها أوصت أيضا بأن لم تقم بإضافة بنقرة JS إلى عنصر لى. وبدلا من ذلك يجب عليك استخدام زر أو مرساة (شيء قابل للنقر) تداخل داخل هذا العنصر.

ومنذ العنصر الذي قمت بالنقر فوق يمكن أن يكون الطفل، وكنت بحاجة للتأكد من أن تستهدف العنصر الصحيح.

في بلدي على سبيل المثال، سوف أكون تعيين النقر على زر داخل لى وكذلك فئة على ذلك. والعلامات يكون ببساطة:

<ul id="taglist">
  <li><button class="tag-button">Tag 1</button></li>
  <!-- ... -->
</ul>

وثم جافا سكريبت:

$('#tagList li button.tag-button').click((e) => {
  const thisButton = $(e.target).hasClass('tag-button')
    ? $(e.target) : $(e.target).closest('.tag-button');
  // do something with thisButton
});

وهذا يضمن أن يتم استهداف العنصر الذي تم تسجيل اضغط على. إذا كان لديك أي علامات متداخلة داخل الزر الخاص بك (مثل أو) فمن الممكن لهدف الحدث ليكون عنصر متداخل بدلا من العنصر الذي تريد تعيين انقر فوق ل.