我的jQuery on-click逻辑有一个问题

ktecyv1j 于 2023-04-29 发布在 jQuery

关注(0)|答案(1)|浏览(82)

我想将assign-btn部分下的img和p的值分别更改为employees部分中的img和p。以下是我迄今为止所能做到的：
代码：

$(document).ready(function() {
  var img = '';
  var name = '';
  var check = false;

  $(document).on('click', '.emp-row', function() {
    $(this).find('.employees').on('click', function() {
      img = $(this).find('.get-img').data('imgid');
      name = $(this).find('.get-name').data('name');
      check = true;
    });

    if (check) {
      $(this).find('.set-img').attr('src', img);
      $(this).find('.set-name').text(name);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row emp-row">
  <div class="col-md-12">
    <div class="assign-va" data-bs-toggle="dropdown">
      <div class="assign-btn">
        <button type="button" class="btn dropdown-toggle dropdown-toggle-btn">
                    <div class='avatar-img-left'>
                        <img src='images/fe1.png' class='me-2 rounded-circle avatar avatar-lg set-img'>
                    </div>
                    <div class='avatar-text-right' style="margin-top: 0">
                        <p class='avatar-name set-name' style="text-align: left">
                            John Doe
                        </p>
                    </div>
                </button>
      </div>
    </div>
    <div class="dropdown-menu">
      <div class="parent-employee">
        <div class="employees" style="cursor: pointer">
          <div class='avatar-img-left'>
            <img src='images/fe2.png' data-imgid='images/fe2.png' class='me-2 rounded-circle avatar avatar-lg get-img'>
          </div>
          <div class='avatar-text-right'>
            <p class='avatar-name get-name' data-name='Jasmine Undoe'>
              Jasmine Undoe
            </p>
            <input type="hidden" name="mydata" class="mydata" value="">
            <input type="hidden" class="empid" id="empid">
          </div>
        </div>
        <div class="employees" style="cursor: pointer">
          <div class='avatar-img-left'>
            <img src='images/fe3.png' data-imgid='images/fe3.png' class='me-2 rounded-circle avatar avatar-lg get-img'>
          </div>
          <div class='avatar-text-right'>
            <p class='avatar-name get-name' data-name='Jenne Redoe'>
              Jenna Redoe
            </p>
            <input type="hidden" name="mydata" class="mydata" value="">
            <input type="hidden" class="empid" id="empid">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row emp-row">
  <div class="col-md-12">
    <div class="assign-va" data-bs-toggle="dropdown">
      <div class="assign-btn">
        <button type="button" class="btn dropdown-toggle dropdown-toggle-btn">
                    <div class='avatar-img-left'>
                        <img src='images/fe1.png' class='me-2 rounded-circle avatar avatar-lg set-img'>
                    </div>
                    <div class='avatar-text-right' style="margin-top: 0">
                        <p class='avatar-name set-name' style="text-align: left">
                            John Doe
                        </p>
                    </div>
                </button>
      </div>
    </div>
    <div class="dropdown-menu">
      <div class="parent-employee">
        <div class="employees" style="cursor: pointer">
          <div class='avatar-img-left'>
            <img src='images/fe2.png' data-imgid='images/fe2.png' class='me-2 rounded-circle avatar avatar-lg get-img'>
          </div>
          <div class='avatar-text-right'>
            <p class='avatar-name get-name' data-name='Jasmine Undoe'>
              Jasmine Undoe
            </p>
            <input type="hidden" name="mydata" class="mydata" value="">
            <input type="hidden" class="empid" id="empid">
          </div>
        </div>
        <div class="employees" style="cursor: pointer">
          <div class='avatar-img-left'>
            <img src='images/fe3.png' data-imgid='images/fe3.png' class='me-2 rounded-circle avatar avatar-lg get-img'>
          </div>
          <div class='avatar-text-right'>
            <p class='avatar-name get-name' data-name='Jenne Redoe'>
              Jenna Redoe
            </p>
            <input type="hidden" name="mydata" class="mydata" value="">
            <input type="hidden" class="empid" id="empid">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

当我改变第一个emp-row上的值时，一切似乎都在工作，然而，问题是，当我试图改变第二个emp-row上的值时，第一行的值首先被分配，然后一切都正常工作。
有什么办法可以防止这种情况发生吗？
谢谢！

jquery

来源：https://stackoverflow.com/questions/76132838/there-is-an-issue-with-my-jquery-on-click-logic

1条答案

按热度按时间

ffx8fchx1#

你面临的挑战不止几个。

button元素应仅包含短语内容，因此不包含div或p Ref： www.example.com 所以我改变了这些。
你不需要这些全局变量，所以我只是移动了它们，并使用let来约束作用域。
id属性是唯一标识符，因此不允许重复。参考： www.example.com 所以我删除了它们。
使用$(function() {的推荐缩写形式$(document).ready(function()
您试图访问一些元素的行元素和其他元素的目标元素，因此我添加了event，然后访问let $parentRow = $(event.delegateTarget);，这是事件处理程序附加的元素$('.emp-row')
永远不要在另一个click事件处理程序中添加一个新的click事件处理程序，除非你先删除它-所以我使用了正确的委托形式。

$(function() {
  $('.emp-row').on('click', '.employees', function(event) {
    let $parentRow = $(event.delegateTarget);
    let img = $(event.delegateTarget).find('.get-img').data('imgid');
    let name = $(this).find('.get-name').data('name');
    console.log(img, name);
    let check = true;
    if (check) {
      let $sentname = $parentRow.find('.set-name');
      let imgel = $parentRow.find('.set-img');
      // console.log("If these are 0 they do not exist:",$sentname.length, imgel.length);
      $sentname.text(name);
      imgel.attr('src', img);
    }
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
</script>
<div class="container">
  <div class="row emp-row">
    <div class="col-md-12">
      <div class="assign-va" data-bs-toggle="dropdown">
        <div class="assign-btn">
          <button type="button" class="btn dropdown-toggle dropdown-toggle-btn">
          <span class='avatar-img-left'>
            <img src='images/fe1.png' class='me-2 rounded-circle avatar avatar-lg set-img' />
          </span>
          <span class='avatar-text-right' style="margin-top: 0">
              <p class='avatar-name set-name' style="text-align: left">
                  John Doe
              </p>
          </span>
</button>
        </div>
      </div>
      <div class="dropdown-menu">
        <div class="parent-employee">
          <div class="employees" style="cursor: pointer">
            <div class='avatar-img-left'>
              <img src='images/fe2.png' data-imgid='images/fe2.png' class='me-2 rounded-circle avatar avatar-lg get-img'>
            </div>
            <div class='avatar-text-right'>
              <p class='avatar-name get-name' data-name='Jasmine Undoe'>
                Jasmine Undoe
              </p>
              <input type="hidden" name="mydata" class="mydata" value="">
              <input type="hidden" class="empid">
            </div>
          </div>
          <div class="employees" style="cursor: pointer">
            <div class='avatar-img-left'>
              <img src='images/fe3.png' data-imgid='images/fe3.png' class='me-2 rounded-circle avatar avatar-lg get-img'>
            </div>
            <div class='avatar-text-right'>
              <p class='avatar-name get-name' data-name='Jenne Redoe'>
                Jenna Redoe
              </p>
              <input type="hidden" name="mydata" class="mydata" value="">
              <input type="hidden" class="empid">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row emp-row">
    <div class="col-md-12">
      <div class="assign-va" data-bs-toggle="dropdown">
        <div class="assign-btn">
          <button type="button" class="btn dropdown-toggle dropdown-toggle-btn">
          <span class='avatar-img-left'>
              <img src='images/fe1.png' class='me-2 rounded-circle avatar avatar-lg set-img'>
          </span>
          <span class='avatar-text-right' style="margin-top: 0">
              <span class='avatar-name set-name' style="text-align: left">
                  John Doe
              </span>
          </span>
        </button>
        </div>
      </div>
      <div class="dropdown-menu">
        <div class="parent-employee">
          <div class="employees" style="cursor: pointer">
            <div class='avatar-img-left'>
              <img src='images/fe2.png' data-imgid='images/fe2.png' class='me-2 rounded-circle avatar avatar-lg get-img'>
            </div>
            <div class='avatar-text-right'>
              <p class='avatar-name get-name' data-name='Jasmine Undoe'>
                Jasmine Undoe
              </p>
              <input type="hidden" name="mydata" class="mydata" value="">
              <input type="hidden" class="empid">
            </div>
          </div>
          <div class="employees" style="cursor: pointer">
            <div class='avatar-img-left'>
              <img src='images/fe3.png' data-imgid='images/fe3.png' class='me-2 rounded-circle avatar avatar-lg get-img'>
            </div>
            <div class='avatar-text-right'>
              <p class='avatar-name get-name' data-name='Jenne Redoe'>
                Jenna Redoe
              </p>
              <input type="hidden" name="mydata" class="mydata" value="">
              <input type="hidden" class="empid">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-04-29

我来回答

我的jQuery on-click逻辑有一个问题

1条答案

相关问题

热门标签

最新问答