Question

我有3行项目（svgs及其描述），几乎相同的标记;我只给每个容器一个额外的识别类，以便区分它们。我想要它，以便当我点击一行中的一个项目的svg时，它不会停用其他项目。每行发生的事件应该相互独立。

$('.container-a .holder').on('click', function() {
      var itemId = $(this).attr('data-itemid');
      console.log(itemId);
      $('.holder').removeClass('activated');
      $('.container-a .description').removeClass('activated');
      $('.item-'+itemId).addClass('activated');
    });

    $('.container-b .holder').on('click', function() {
      var itemId = $(this).attr('data-itemid');
      console.log(itemId);
      $('.holder').removeClass('activated');
      $('.container-b .description').removeClass('activated');
      $('.item-'+itemId).addClass('activated');
    });

    $('.container-c .holder').on('click', function() {
      var itemId = $(this).attr('data-itemid');
      console.log(itemId);
      $('.holder').removeClass('activated');
      $('.container-c .description').removeClass('activated');
      $('.item-'+itemId).addClass('activated');
    });

这是我之前使用过的东西，然而，它在点击某些内容后停用其他所有内容，而不是仅停用该行中的其他所有内容。

$('.holder').on('click', function() {
  var itemId = $(this).attr('data-itemid');
  console.log(itemId);
  $('.holder').removeClass('activated');
  $('.description').removeClass('activated');
  $('.item-'+itemId).addClass('activated');
});

这是我的HTML

<div class="container-a container">
  <div class="img-container">
    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>
  </div>

  <div class="desc-container">

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

  </div>
</div>



<div class="container-b container">
  <div class="img-container">
    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>
  </div>

  <div class="desc-container">

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

  </div>
</div>

<div class="container-c container">
  <div class="img-container">
    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>
  </div>

  <div class="desc-container">

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

  </div>
</div>

有什么方法可以将其分解为单击功能而不是3？

Answer 1

如果你提供HTML代码，你会给我们更多的帮助机会，但现在你可以试试

function change(element){
  var itemId = element.attr('data-itemid');
  console.log(itemId);
  $('.holder').removeClass('activated');
  $(element).find('.description').removeClass('activated');
  $('.item-'+itemId).addClass('activated');
}

$('.container-a .holder').on('click', function() {
      change(this);
    });

Answer 2

基本上，这一切都归结为找到一种方法来选择editor= QtGui.QTextCharFormat() fmt = QtGui.QTextCharFormat() fmt.setUnderlineColor(Qt.red) fmt.setUnderlineStyle(QtGui.QTextCharFormat.SpellCheckUnderline) block = editor.document().findBlockByLineNumber(line) blockPos = block.position() cursor = QtGui.QTextCursor(editor.document()) cursor.setPosition(blockPos) cursor.select(QtGui.QTextCursor.LineUnderCursor) cursor.setCharFormat(fmt)元素。

我相信这会奏效：

description

Answer 3

您可以将部分代码移动到常规功能：

$('.container-a .holder').on('click', function() {
  updateClasses('.container-a .description', $(this).attr('data-itemid'));
});

$('.container-b .holder').on('click', function() {
  updateClasses('.container-b .description', $(this).attr('data-itemid'));
});

$('.container-c .holder').on('click', function() {
  updateClasses('.container-c .description', $(this).attr('data-itemid'));
});

function updateClasses(container, itemId) {
  console.log(itemId);
  $('.holder').removeClass('activated');
  $(container).removeClass('activated');
  $('.item-' + itemId).addClass('activated');
}

请注意，它可能更简单，具体取决于HTML文件的外观。

简化jquery中的冗余脚本以激活项目

3 个答案: