Question

我有一个由CSS类设置样式的元素列表。我需要使用JQuery单独定位这些元素。

例如，我有一个使用JQuery .pass-fail-icon的类.hasClass()：

// Method simply swaps out image based on .hasClass() result
function checkPassed() {
  if ($(".pass-fail-icon").hasClass("passed")) {
    var failSrc = 'img/Fail.svg';
    var passSrc = 'img/Pass.svg';
    $('img[src="' + failSrc + '"]').attr('src', passSrc);

  } else {
    var failSrc = 'img/Fail.svg';
    var passSrc = 'img/Pass.svg';
    $('img[src="' + passSrc + '"]').attr('src', failSrc);

  }
}

但是我需要单独定位.pass-fail-icon，因为我无法确定列表的生成时间。

如何为.pass-fail-icon提供唯一ID，以及如何在上述方法中定位？

Answer 1

我认为你不需要你想要做的事情。

var failSrc = 'img/Fail.svg';
var passSrc = 'img/Pass.svg';

//get all pass-fail-icons which don't have a class .passed
$(".pass-fail-icon:not(.passed)").attr('src', failSrc);

//get all pass-fail-icons with a class .passed
$(".pass-fail-icon.passed").attr('src', passSrc);

或者以下内容也应该起作用

$(".pass-fail-icon").attr('src', failSrc);
$(".pass-fail-icon.passed").attr('src', passSrc);

为failSrc分配所有图标并覆盖passSrc传递的所有图标

Answer 2

您可以使用.each()来迭代元素。而且你不应该每次都创建两个变量。

function checkPassed() {

  var failSrc = 'img/Fail.svg';
  var passSrc = 'img/Pass.svg';

  $(".pass-fail-icon").each(function() {

    if ($(this).hasClass("passed")) {
      $('img[src="' + failSrc + '"]').attr('src', passSrc);
    } else {
      $('img[src="' + passSrc + '"]').attr('src', failSrc);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

使用JQuery将Uinque ID分配给元素和目标

2 个答案: