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

Question

我正在做一个项目，遇到了一个问题。这是一个 jQuery 问题，我不擅长 jQuery。我希望当有人单击列表项 (<ul id="res-menu-filters"><li></li></ul>) 时，h3(<h3 id="menu-title-layout-text">Change Value</h3>) 标签上的值将更改为 div#menu-extend-title (<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;
});

Answer 1

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

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

使用以下代码：

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

Answer 2

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

Answer 3

一个元素的

ID必须是唯一的，所以需要使用class对相似的元素进行分组，同样在你需要找到的click handler中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>

Answer 4

如果您使用了重复的 ID，请改用通用 class

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

Answer 5

你的意思是这样的吗：

这里有一个更好的 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());
 })

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

Show value on title from clicked item with jQuery

javascript

jquery

onclick