javascript - 如果 rect 有类，则在框中添加列表

Question

我在选择 svg 中的矩形时遇到问题。

如您所见，我想在 ul 中写一个列表。

如果矩形有一个类 something。例如，如果矩形有红色类，那么我想在 ul 中添加一个列表，或者如果另一个矩形有蓝色类，我想添加另一个列表等等。

(function($) {
      var rect = $('#edna-rect');
      var ul = $('.personal-list-ul');
      var personBox = $('.person-box');

      personBox.each(function(){
          if (rect.hasClass('red')) {
              $(this).ul.html('<li>List 1</li><li>List2</li><li>List3</li>')
          }
      })

 })(jQuery);

svg rect.red {
  fill: red;
}

svg rect.blue {
  fill: blue;
}

.person-box {
  width: 45%;
  float: left;
 }

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


<div class="person-box" style="border:1px solid red">
    <div class="person-info-top">

        <h4 class="person-name"><a href="">Julia</a></h4>
        
        
        <svg id="rect-empty-big" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 47 47">
            <rect id="edna-rect" class="st0edna rectangle red" x=".5" y=".5"  width="46" height="46"/>
        </svg>

    </div>
    
    <div class="person-needs">
        <h5 class="text-center">Personal List</h5>
        <ul class="personal-list-ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>


<div class="person-box" style="border:1px solid red">
    <div class="person-info-top">

        <h4 class="person-name"><a href="">Brad</a></h4>
        
        
        <svg id="rect-empty-big" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 47 47">
            <rect id="edna-rect" class="st0edna rectangle blue" x=".5" y=".5"  width="46" height="46"/>
        </svg>

    </div>
    
    <div class="person-needs">
        <h5 class="text-center">Personal List</h5>
        <ul class="personal-list-ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

Answer 1

由于 SVG 不支持 hasClass，您可以使用 .indexOf()

(function($) {
  var rect = $('.st0edna');
  var ul = $('.personal-list-ul');
  var personBox = $('.person-box');
  personBox.each(function() {
    if ($(this).find(rect).attr('class').indexOf("red") > -1) {
      $(this).find(ul).html('<li>List 1</li><li>List2</li><li>List3</li>')
    }
  })

})(jQuery);

此外，您不能有多个具有相同 ID 的元素，Id 应该是唯一的。所以我将 var rect = $('#edna-rect'); 更改为 var rect = $('.st0edna')

(function($) {
  var rect = $('.st0edna');
  var ul = $('.personal-list-ul');
  var personBox = $('.person-box');
  personBox.each(function() {
    if ($(this).find(rect).attr('class').indexOf("red") > -1) {
      $(this).find(ul).html('<li>List 1</li><li>List2</li><li>List3</li>')
    }
  })

})(jQuery);

svg rect.red {
  fill: red;
}

svg rect.blue {
  fill: blue;
}

.person-box {
  width: 45%;
  float: left;
}

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


<div class="person-box" style="border:1px solid red">
  <div class="person-info-top">

    <h4 class="person-name"><a href="">Julia</a></h4>


    <svg id="rect-empty-big" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 47 47">
            <rect  class="st0edna rectangle red" x=".5" y=".5"  width="46" height="46"/>
        </svg>

  </div>

  <div class="person-needs">
    <h5 class="text-center">Personal List</h5>
    <ul class="personal-list-ul">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>


<div class="person-box" style="border:1px solid red">
  <div class="person-info-top">

    <h4 class="person-name"><a href="">Brad</a></h4>


    <svg id="rect-empty-big" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 47 47">
            <rect class="st0edna rectangle blue" x=".5" y=".5"  width="46" height="46"/>
        </svg>

  </div>

  <div class="person-needs">
    <h5 class="text-center">Personal List</h5>
    <ul class="personal-list-ul">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>