javascript - 为什么点击时值(value)相同？

Question

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

我想要:当我点击 fa-chevron-down font awesome 图标然后打开一个 control types 现在它有两种类型(input control 和 email control) 但它可能是多个。

当我点击 control types 时，它会更改 Table TR 中给出的主要值。

当我点击第二个 fa-chevron-down 然后 Table TR< 时，第一个 fa-chevron-down 字体很棒的图标点击工作正常 值改变了，为什么我无法理解。

我的代码:

 $('body').on('click', '.select-response-type-btn', function (e) {
            var thisClick = $(this);
            $('.select-response-type-box').show();
            $('.response-menu-item').click(function () {
                var thisMunuItemHtml = $(this).html();
                $('.select-response-type-box').hide();
                $(thisClick).prev('.response-menu-item').html(thisMunuItemHtml);
            });
        });

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

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"
        integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
        
<table class="table table-bordered">
        <tbody>
            <tr>
                <td>
                    <div class="type-selector">
                        <div class="response-menu-item">
                            <div class="selected-icon-circle icon-text-light-green">
                                <i class="far fa-calendar-alt"></i>
                            </div>
                            <span>Date & Time</span>
                        </div>
                        <i class="fas fa-chevron-down chevron-custom select-response-type-btn" id="type_btn1"></i>
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div class="type-selector">
                        <div class="response-menu-item">
                            <div class="selected-icon-circle icon-text-light-green">
                                <i class="far fa-calendar-alt"></i>
                            </div>
                            <span>Date & Time control</span>
                        </div>
                        <i class="fas fa-chevron-down chevron-custom select-response-type-btn" id="type_btn2"></i>
                    </div>
                </td>
            </tr>

        </tbody>
    </table>


    <div class="select-response-type-box d-custom-none">
        <div class="response-menu-item">input control</div>
        <div class="response-menu-item">email control</div>
    </div>

回答将不胜感激!

Answer 1

我花了很多时间做了一个工作示例。 jsfiddle

var clickIndex = 0;
$('body').on('click', '.select-response-type-btn', function () {
    clickIndex = $(this).parent().parent().parent().index();
    console.log(clickIndex);
    var thisClick = $(this);
    $('.select-response-type-box').show();
    $('.response-menu-item').click(function () {
        var thisMunuItemHtml = $(this).html();
        $('.select-response-type-box').hide();

        $('.type-selector').find('.response-menu-item').eq(clickIndex).html(thisMunuItemHtml);
        //$(thisClick).prev('.response-menu-item').html(thisMunuItemHtml);
    });
});

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

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