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

我正在做一个项目，面临一个问题。这是一个jQuery问题，我不擅长jQuery。我想当有人点击列表项（

）时，h3（

change value

）标签上的值将发生变化，标签的值为div#menu extend title（

breaken

）

我尝试了一个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>

---

由于以下问题，它无法工作：

HTML

菜单扩展标题

是一个ID。它对于元素应该是唯一的

将

菜单扩展标题

更改为类并使用

。菜单扩展标题

使用以下代码：

<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;
});

类别1
早餐

第2类
发射

第3类 晚餐 jQuery（“#餐厅菜单内容选项卡”）。在（'click'，“#res menu filters li'，函数（e）上{ var value=jQuery（'.menu extend title'，this）.text（）； jQuery（this.find（'div'）.text（value）； 返回false； });

---

正如arun指出的，ID应该是唯一的。您应该使用classname。您还可以使用当前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;
 });

元素的必须是唯一的，因此需要使用类对类似的元素进行分组，还需要在单击处理程序中找到

title

元素，该元素是单击的

li

jQuery（“#餐厅菜单内容选项卡”）。在（'click'，“#res菜单过滤器li'，函数（e）{
var value=jQuery（this）.find（'.menu-extend-title'）.text（）；
jQuery（“#菜单标题布局文本”）.text（值）；
返回false；
});

早餐

类别1
早餐

第2类
发射

第3类
晚餐


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

<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>

你的意思是这样的：

下面是一个更好的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>

元素的ID必须是唯一的-使用类而不是重复元素的ID是的。。。我完全忘记了…哦，是的。。。。ID应该是唯一的。。这是我的想法。我真的很抱歉。现在它起作用了。但它显示了包含class.menu扩展标题的所有值。“我只想显示单击的一个值。@Blackboy用上下文选择器更新了答案。刷新并检查。
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;
});

<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>

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