如何使用jQuery在列表元素內點擊圖像？

我正在嘗試做一個功能列表，讓一個星星重要的項目。如何使用jQuery在列表元素內點擊圖像？

這裏是我的index.html

<!DOCTYPE html> 

<html> 
    <head> 
    <title>JavaScript &amp; jQuery - Chapter 7: Introducing jQuery - Example</title> 
    <link rel="stylesheet" href="css/styles.css" /> 
    </head> 
    <body> 
    <div id="page"> 
     <h2>To Do List</em><span id="counter"></span></h2> 
     <form id="newItemForm"> 
     <input type="text" id="itemDescription" placeholder="Add description" /> 
     <input type="submit" id="add" value="add" /> 
     </form> 
     <ul id="list"> 
     </ul> 
    </div> 
    <script src="js/jquery-1.11.0.js"></script> 
    <script src="js/example.js"></script> 
    </body> 
</html>

這裏是我的example.js它包含了所有的JavaScript功能

$(function() { 

    // SETUP 
    var $list, $newItemForm, $newItemButton; 
    var item = '';         // item is an empty string 
    $list = $('ul');        // Cache the unordered list 
    $newItemForm = $('#newItemForm');    // Cache form to add new items 
    $newItemButton = $('#newItemButton');   // Cache button to show form 

    $('li').hide().each(function(index) {   // Hide list items 
    $(this).delay(450 * index).fadeIn(1600);  // Then fade them in 
    }); 

    // ITEM COUNTER 
    function updateCount() {      // Create function to update counter 
    var items = $('li[class!=complete]').length; // Number of items in list 
    $('#counter').text(items);     // Added into counter circle 
    } 
    updateCount();         // Call the function 

    // ADDING A NEW LIST ITEM 
    $newItemForm.on('submit', function(e) {  // When a new item is submitted 
    e.preventDefault();       // Prevent form being submitted 
    var text = $('input:text').val();   // Get value of text input 
    if(text != ""){ 
     $list.append('<li>' + text + '<div class="starItemButton"><img src="images/empty-star.png" alt="empty star"/></li>');  // Add item to end of the list 
     $('input:text').val('');     // Empty the text input 
     updateCount();        // Update the count 
    } 
    }); 

    // CLICK HANDLING - USES DELEGATION ON <ul> ELEMENT 
    $list.on('click', 'li', function(e) { 
    var $this = $(this);    // Cache the element in a jQuery object 
    var complete = $this.hasClass('complete'); // Is item complete 
    if(e.target.class == "starItemButton" || $(e.target).parents(".starItemButton").size){ 
     item = $this.text();    // Get the text from the list item 
     $this.remove();     // Remove the list item 
     $list       // Add back to end of list as complete 
     .prepend('<li class=\"starred\">' + item + '<div class="starItemButton"><img src="images/full-star.png" alt="full star"/></li>') 
     .hide().fadeIn(300); 
    } 
    else{ 
     if (complete === true) {   // Check if item is complete 
      $this.animate({     // If so, animate opacity + padding 
      opacity: 0.0, 
      paddingLeft: '+=180' 
      }, 500, 'swing', function() { // Use callback when animation completes 
      $this.remove();    // Then completely remove this item 
      }); 
     } else {       // Otherwise indicate it is complete 
      item = $this.text();    // Get the text from the list item 
      $this.remove();     // Remove the list item 
      $list       // Add back to end of list as complete 
      .append('<li class=\"complete\">' + item + '</li>') 
      .hide().fadeIn(300);   // Hide it so it can be faded in 
      updateCount();     // Update the counter 
     } 
    } // End of else option 
    });         // End of event handler 
});  

         // End of event handler

，你可以在我的$list.on('click'...方法看，我現在用的是if(e.target.class == "starItemButton" || $(e.target).parents(".starItemButton").size){以測試點擊發生在starItemButtondiv

但是，這if語句似乎通過，即使我點擊外部的div，我如何才能得到一個函數，只有當用戶點擊內與starItemButton類運行？

任何幫助是極大的讚賞，

謝謝

來源

2017-03-10 Matt D

您可以直接連接處理程序的形象，而不是對整個列表項。然後你不需要對目標執行檢查，並且事件只會觸發該元素。

$list.on('click', 'li div.starItemButton', function(e) { 
    // handler 
});

來源

2017-03-10 21:46:08

如何在執行此操作後訪問父列表項？我試着'$（this）.closest（'li'）'但它不工作。 –

它不會返回'li'嗎？只要'div'是'li'元素的子元素，它就應該可以工作。 –

我忘了'$（this）'的括號，謝謝 –

如何使用jQuery在列表元素內點擊圖像？

回答

相關問題