为什么在点击时数值相同？

huangapple
go评论129阅读模式
英文:

Why value is coming same on click?

问题

我有两个Table TR，其中定义了带有fa-chevron-down Font Awesome图标的控件类型。

我想要：
当我点击fa-chevron-down Font Awesome图标时，打开一个控件类型，现在有两种类型（输入控件和电子邮件控件），但它可能有多个。

当我点击控件类型时，它会更改Table TR中给定的主要值。

第一次点击fa-chevron-down Font Awesome图标时它可以正常工作，但是当我点击第二次fa-chevron-down时，两个Table TR的值都会更改，我为什么无法理解。

我的代码：

  1. <!-- 开始代码段 -->
  2. <!-- JavaScript代码 -->
  3. $('body').on('click', '.select-response-type-btn', function (e) {
  4.     var thisClick = $(this);
  5.     $('.select-response-type-box').show();
  6.     $('.response-menu-item').click(function () {
  7.         var thisMunuItemHtml = $(this).html();
  8.         $('.select-response-type-box').hide();
  9.         $(thisClick).prev('.response-menu-item').html(thisMunuItemHtml);
  10.     });
  11. });
  13. <!-- CSS代码 -->
  14. .d-custom-none { display: none; }
  15. .select-response-type-box { border: 1px solid #ccc; padding: 10px; }
  17. <!-- HTML代码 -->
  18. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  20. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  21. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  22. <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
  24. <table class="table table-bordered">
  25.     <tbody>
  26.         <tr>
  27.             <td>
  28.                 <div class="type-selector">
  29.                     <div class="response-menu-item">
  30.                         <div class="selected-icon-circle icon-text-light-green">
  31.                             <i class="far fa-calendar-alt"></i>
  32.                         </div>
  33.                         <span>Date & Time</span>
  34.                     </div>
  35.                     <i class="fas fa-chevron-down chevron-custom select-response-type-btn" id="type_btn1"></i>
  36.                 </div>
  37.             </td>
  38.         </tr>
  40.         <tr>
  41.             <td>
  42.                 <div class="type-selector">
  43.                     <div class="response-menu-item">
  44.                         <div class="selected-icon-circle icon-text-light-green">
  45.                             <i class="far fa-calendar-alt"></i>
  46.                         </div>
  47.                         <span>Date & Time control</span>
  48.                     </div>
  49.                     <i class="fas fa-chevron-down chevron-custom select-response-type-btn" id="type_btn2"></i>
  50.                 </div>
  51.             </td>
  52.         </tr>
  54.     </tbody>
  55. </table>
  57. <div class="select-response-type-box d-custom-none">
  58.     <div class="response-menu-item">input control</div>
  59.     <div class="response-menu-item">email control</div>
  60. </div>
  61. <!-- 结束代码段 -->

将代码段添加到你的项目中，它应该能够正常工作。

英文:

I have two Table TR there is define control types with fa-chevron-down font awesome icon.

I want:
When i click on fa-chevron-down font awesome icon then open a control types now its two types (input control and email control) but it may be multiple.

When i click on control types then it is change the main value which are given in Table TR.

It is working fine for first fa-chevron-down font awesome icon click when i click on second fa-chevron-down then both Table TR value changed, why i'm not able to understand.

My Code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1.  $(&#39;body&#39;).on(&#39;click&#39;, &#39;.select-response-type-btn&#39;, function (e) {
  2. var thisClick = $(this);
  3. $(&#39;.select-response-type-box&#39;).show();
  4. $(&#39;.response-menu-item&#39;).click(function () {
  5. var thisMunuItemHtml = $(this).html();
  6. $(&#39;.select-response-type-box&#39;).hide();
  7. $(thisClick).prev(&#39;.response-menu-item&#39;).html(thisMunuItemHtml);
  8. });
  9. });

<!-- language: lang-css -->

  1.         .d-custom-none{ display: none;}
  2. .select-response-type-box{ border: 1px solid #ccc; padding: 10px;}

<!-- language: lang-html -->

  1.   &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot;&gt;
  2. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  4. &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  5. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js&quot;
  6. integrity=&quot;sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  7. &lt;table class=&quot;table table-bordered&quot;&gt;
  8. &lt;tbody&gt;
  9. &lt;tr&gt;
  10. &lt;td&gt;
  11. &lt;div class=&quot;type-selector&quot;&gt;
  12. &lt;div class=&quot;response-menu-item&quot;&gt;
  13. &lt;div class=&quot;selected-icon-circle icon-text-light-green&quot;&gt;
  14. &lt;i class=&quot;far fa-calendar-alt&quot;&gt;&lt;/i&gt;
  15. &lt;/div&gt;
  16. &lt;span&gt;Date &amp; Time&lt;/span&gt;
  17. &lt;/div&gt;
  18. &lt;i class=&quot;fas fa-chevron-down chevron-custom select-response-type-btn&quot; id=&quot;type_btn1&quot;&gt;&lt;/i&gt;
  19. &lt;/div&gt;
  20. &lt;/td&gt;
  21. &lt;/tr&gt;
  22. &lt;tr&gt;
  23. &lt;td&gt;
  24. &lt;div class=&quot;type-selector&quot;&gt;
  25. &lt;div class=&quot;response-menu-item&quot;&gt;
  26. &lt;div class=&quot;selected-icon-circle icon-text-light-green&quot;&gt;
  27. &lt;i class=&quot;far fa-calendar-alt&quot;&gt;&lt;/i&gt;
  28. &lt;/div&gt;
  29. &lt;span&gt;Date &amp; Time control&lt;/span&gt;
  30. &lt;/div&gt;
  31. &lt;i class=&quot;fas fa-chevron-down chevron-custom select-response-type-btn&quot; id=&quot;type_btn2&quot;&gt;&lt;/i&gt;
  32. &lt;/div&gt;
  33. &lt;/td&gt;
  34. &lt;/tr&gt;
  35. &lt;/tbody&gt;
  36. &lt;/table&gt;
  37. &lt;div class=&quot;select-response-type-box d-custom-none&quot;&gt;
  38. &lt;div class=&quot;response-menu-item&quot;&gt;input control&lt;/div&gt;
  39. &lt;div class=&quot;response-menu-item&quot;&gt;email control&lt;/div&gt;
  40. &lt;/div&gt;

<!-- end snippet -->

Answer will appreciated!

答案1

得分: 1

  1. 为什么要使用 HTML 表格？在 div 和 tr 之间获取 index 很困难。

  2. 最重要的是 jQuery 选择器 .select-response-type-btn 返回错误的位置。你必须打印点击的索引，像这样：clickIndex = $(this).parent().parent().parent().index(); 如果 clickIndex 返回正确的索引，那么你的示例将正常工作。

英文:

I spent a lot of time made an working example.
jsfiddle

  1. var clickIndex = 0;
  2. $(&#39;body&#39;).on(&#39;click&#39;, &#39;.select-response-type-btn&#39;, function () {
  3. clickIndex = $(this).parent().parent().parent().index();
  4. console.log(clickIndex);
  5. var thisClick = $(this);
  6. $(&#39;.select-response-type-box&#39;).show();
  7. $(&#39;.response-menu-item&#39;).click(function () {
  8. var thisMunuItemHtml = $(this).html();
  9. $(&#39;.select-response-type-box&#39;).hide();
  10. $(&#39;.type-selector&#39;).find(&#39;.response-menu-item&#39;).eq(clickIndex).html(thisMunuItemHtml);
  11. //$(thisClick).prev(&#39;.response-menu-item&#39;).html(thisMunuItemHtml);
  12. });
  13. });

  1. Why you use HTML Table ?? It's hard to get index between div and tr.

  2. The most important is jquery selector .select-response-type-btn return wrong position. you must print click index like clickIndex = $(this).parent().parent().parent().index(); if clickIndex return correct index then your example will working.

huangapple
  • 本文由 发表于 2020年1月3日 13:59:39
  • 转载请务必保留本文链接：https://go.coder-hub.com/59573848.html
  • css
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定