使用jQuery显示单击项目的标题值

Show value on title from clicked item with jQuery

本文关键字：标题 项目 单击 jQuery 显示 使用      更新时间：2023-09-26

我正在处理一个项目，并面临一个问题。这是一个jQuery问题，我不擅长jQuery。我希望当有人单击列表项（<ul id="res-menu-filters"><li></li></ul>）时，h3（<h3 id="menu-title-layout-text">Change Value</h3>）标签上的值将更改为div#菜单扩展标题（<div id="menu-extend-title">Breakfast</div>）的值。

我尝试了jQuery，但它不起作用。

下面是我的html代码和jQuery代码。

我该怎么做？

提前谢谢。

<div class="menu-title-layout-change">
 <h3 id="menu-title-layout-text">Breakfast</h3>
</div>

<ul id="res-menu-filters">
  <li class="filter">Category 1
    <div id="menu-extend-title">
     Breakfast
    </div>
 </li>
 <li class="filter">Category 2
   <div id="menu-extend-title">
     Launch
   </div>
 </li>
 <li class="filter">Category 3
   <div id="menu-extend-title">
     Dinner
   </div>
 </li>

jQuery代码：

jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e)
{
    var value = jQuery('#menu-extend-title').text();
    jQuery('#menu-title-layout-text').text(value);
    return false;
});

如果使用重复的ids ，请使用公共类

<ul id="res-menu-filters">
 <li class="filter">Category 1
    <div class="menu-extend-title">
     Breakfast
    </div>
 </li>
 <li class="filter">Category 2
   <div class="menu-extend-title">
     Launch
   </div>
 </li>
 <li class="filter">Category 3
   <div class="menu-extend-title">
     Dinner
   </div>
 </li>

jquery

jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e){
    var value = jQuery(this).find('.menu-extend-title').text();
    jQuery('#menu-title-layout-text').text(value);
    return false;
});

元素的ID必须是唯一的，因此需要使用class对类似的元素进行分组，并且在单击处理程序中，您需要找到title元素，它是单击的li 的后代

jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e) {
  var value = jQuery(this).find('.menu-extend-title').text();
  jQuery('#menu-title-layout-text').text(value);
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="restaurant-menu-content-tab">
  <div class="menu-title-layout-change">
    <h3 id="menu-title-layout-text">Breakfast</h3>
  </div>
  <ul id="res-menu-filters">
    <li class="filter">Category 1
      <div class="menu-extend-title">Breakfast</div>
    </li>
    <li class="filter">Category 2
      <div class="menu-extend-title">Launch</div>
    </li>
    <li class="filter">Category 3
      <div class="menu-extend-title">Dinner</div>
    </li>
  </ul>
</div>

由于以下问题，它不起作用：

  1. HTML menu-extend-title是一个ID。对于元素，它应该是唯一的
  2. 将menu-extend-title更改为class并使用.menu-extend-title

  3. 使用以下代码：

    <li class="filter">Category 1
   <div class="menu-extend-title">
    Breakfast
   </div>
</li>
<li class="filter">Category 2
  <div class="menu-extend-title">
    Launch
  </div>
</li>
<li class="filter">Category 3
  <div class="menu-extend-title">
    Dinner
  </div>
</li>
jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e) {
  var value = jQuery('.menu-extend-title', this).text();
  jQuery(this).find('div').text(value);
  return false;
});

正如arun所指出的，ID应该是唯一的。您应该使用类名。此外，您还可以使用当前li上下文，使用当前单击的上下文在其中获取所需的div，并查找选择器：

 jQuery('#restaurant-menu-content-tab').on('click', '#res-menu-filters li', function(e){      
  var value = jQuery(this).find('div').text();
  jQuery('#menu-title-layout-text').text(value);
  return false;
 });

你的意思是这样的吗：

这里有一个更好的html代码：

<div class="menu-title-layout-change">
 <h3 class="menu-title-layout-text">Breakfast</h3>
</div>

<ul class="res-menu-filters">
  <li class="filter">Category 1
    <div class="menu-extend-title">
     Breakfast
    </div>
 </li>
 <li class="filter">Category 2
   <div class="menu-extend-title">
     Launch
   </div>
 </li>
 <li class="filter">Category 3
   <div class="menu-extend-title">
     Dinner
   </div>
 </li>

确保你的html id是唯一的！这个jquery：

 $(document).on('click','.res-menu-filters',function(){
  $('.menu-title-layout-text').text($(this).find('.menu-extend-title').text());
 })
相关文章：