提问者:小点点

单击nodelist中的元素时切换src属性


我已经创建了一组问题和答案,每个问题旁边是一个img,每当有人点击一个问题时,我会尝试切换该图像的src。到目前为止,因为问题存储在nodelist中,我设法让图像切换,但它切换了所有的图像,我只想让我点击的问题切换存储在里面的图像。

null

let returnContent = [{
    question: "How do I return an item?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "NEW! Instant Returns with InPost Lockers",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "What happens if I miss my delivery?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Our carrier delivers between 9am and 10pm, which may vary depending on the service selected and a signature is required. <br> There are a number of options available if you think you won't be in to sign for your order. We'll pass your e-mail address and mobile number (if provided) to Hermes or DPD and they'll provide you with information about your delivery by e-mail or text message the evening before. <br> Please note deliveries outside of the UK can take anything up to 10 days. Follow your order using the tracking link in your despatch email to check if any delivery attempt has been made.",
  },
  {
    question: "Can I track my delivery?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "Do I pay customs or import charges?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "Can I change my address after ordering?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "Is the site secure?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
]

jQuery($ => {
    let questionHtml = returnContent.map(obj => `<div class="question-container"><div class="questions"> <a onclick=""><h3>${obj.question}</h3></a><img src="${obj.icon}" class="toggle-icon"></div><div class="answer" hidden><p>${obj.answer}</p></div></div>`).join('');
    $('#Returns').append(`<div class="returnsWrapper">${questionHtml}</div>`);
  
    $('.questions').on('click', e => $(e.currentTarget).next('.answer').toggle());
    
    let plus = "https://via.placeholder.com/50x50";
    let minus = "https://via.placeholder.com/100x50";

    $('.questions').on('click', () =>  {
        if($('.toggle-icon').attr('src') === plus) {
            console.log('hello')
            $('.toggle-icon').attr('src', minus)
        }else {
            $('.toggle-icon').attr('src', plus)
        }
    })
   
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="Returns">
  <div class="title-container">
    <p>Returns</p>
  </div>
</div>

null


共1个答案

匿名用户

您可以使用$(E.currentTarget)获取toggle-icon的引用。查找(“.toggle-icon”)并更改放置click事件的特定IMG的src

演示代码:

let returnContent = [{
    question: "How do I return an item?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "NEW! Instant Returns with InPost Lockers",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "What happens if I miss my delivery?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Our carrier delivers between 9am and 10pm, which may vary depending on the service selected and a signature is required. <br> There are a number of options available if you think you won't be in to sign for your order. We'll pass your e-mail address and mobile number (if provided) to Hermes or DPD and they'll provide you with information about your delivery by e-mail or text message the evening before. <br> Please note deliveries outside of the UK can take anything up to 10 days. Follow your order using the tracking link in your despatch email to check if any delivery attempt has been made.",
  },
  {
    question: "Can I track my delivery?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "Do I pay customs or import charges?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "Can I change my address after ordering?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    question: "Is the site secure?",
    icon: "https://via.placeholder.com/50x50",
    answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
]

jQuery($ => {
  let questionHtml = returnContent.map(obj => `<div class="question-container"><div class="questions"> <a onclick=""><h3>${obj.question}</h3></a><img src="${obj.icon}" class="toggle-icon"></div><div class="answer" hidden><p>${obj.answer}</p></div></div>`).join('');
  $('#Returns').append(`<div class="returnsWrapper">${questionHtml}</div>`);
  let plus = "https://via.placeholder.com/50x50";
  let minus = "https://via.placeholder.com/100x50";

  $('.questions').on('click', (e) => {
    $(e.currentTarget).next('.answer').toggle();
    //check toggle-icon src
    if ($(e.currentTarget).find(".toggle-icon").attr('src') === plus) {
      //only change src where questions has been clicked
      $(e.currentTarget).find(".toggle-icon").attr('src', minus)
    } else {
      $(e.currentTarget).find(".toggle-icon").attr('src', plus)
    }
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="Returns">
  <div class="title-container">
    <p>Returns</p>
  </div>
</div>