javascript 我有一个jquery toggle函数,可以隐藏和显示一个p标签,当有多个标记时,我只希望它切换用户单击的特定标记

nukf8bse  于 2023-06-28  发布在  Java
关注(0)|答案(2)|浏览(119)

我有一个jquery函数,可以切换p标签的hide和show。在我的HTML中,它在结果中带来了多个不同的store.id。有特定的p标签在搜索每个商店的ID,我只是希望它显示/隐藏特定的一个用户点击。当我运行这个命令时,所有商店的p标签都显示隐藏和显示,而不是用户单击的特定商店。有没有一种方法可以使它具体到用户点击?

HTML:

<div>
    <a class="store-detail-link" href="${URLUtils.url('Stores-Details', 'storeID', store.ID)}">
        Details
    </a>
    <p class="${store.ID} test"></p>
</div>

JS:

$('.test').toggle();

用户将获得多个商店ID结果。他们应该能够切换“详细信息”按钮上的特定商店ID,他们点击,而不是所有的“详细信息”得到显示。

d7v8vwbk

d7v8vwbk1#

要使切换功能特定于用户在store-detail-link元素上的单击,需要修改jQuery代码。下面是一个更新的版本,应该可以实现所需的行为:

$('.store-detail-link').click(function(e) {
    e.preventDefault(); // Prevent the default link behavior

    var $target = $(this).next('.test'); // Find the corresponding p tag

    $target.toggle(); // Toggle the visibility of the p tag
});
<div>
    <a class="store-detail-link" href="${URLUtils.url('Stores-Details', 'storeID', store.ID)}">
        Details
    </a>
    <p class="${store.ID} test"></p>
</div>
rekjcdws

rekjcdws2#

每个元素的id在这里无关紧要。应该尽可能避免使用ID,因为它们的使用会产生脆弱的代码,无法很好地扩展。相反,以一种更相对的方式引用元素。也就是说,根据某些内容在DOM结构中的位置来查找元素。
请参见内联注解。

// Set up one event handler that is an ancestor of all the possibly clicked elements
// and let the event bubble up to it from whichever element within 
// it that was clicked.
document.getElementById("wrapper").addEventListener("click", function(event){
  event.preventDefault();
  
  // Check to see if the event was triggered by an element we care to handle.
  if(event.target.classList.contains("store-detail-link")){
    // Reference the <p> that comes after the clicked <a>
    $(event.target).next("p").toggle();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div>
    <a class="store-detail-link" href="${URLUtils.url('Stores-Details', 'storeID', store.ID)}">
        Details 1
    </a>
    <p class="${store.ID} test">Show/Hide 1</p>
  </div>
  <div>
    <a class="store-detail-link" href="${URLUtils.url('Stores-Details', 'storeID', store.ID)}">
        Details 2
    </a>
    <p class="${store.ID} test">Show/Hide 2</p>
  </div>
  <div>
    <a class="store-detail-link" href="${URLUtils.url('Stores-Details', 'storeID', store.ID)}">
        Details 3
    </a>
    <p class="${store.ID} test">Show/Hide 3</p>
  </div>  
</div>

相关问题