jQuery - 将类从一个元素复制到另一个 IF 条件是正确的

Question

我之后的基本想法..

在文档中，将类从“#box-one”复制到“#box-三”if“#box-two img”与“#”具有相同的图像名称box-one img”

，如果可能的话......可以从传输

html 中排除特定类：

<span id="box-one" class="first second third">
   <img src="imagefolder/image1.jpg" alt />
</span>

<span id="box-two">
   <img src="imagefolder2/image1.jpg" alt />
</span>

<span id="box-three"></span>

请记住，“#box-one”和“#box-two”内的图像会发生变化，但始终相同。

就js而言，我不知道如何做到这一点。这怎么能做到呢？

Answer 1

$(document).ready(function(){

    var classesToIgnore = ["second"];

    if($("#box-one > img").attr("src").split('/').pop() == $("#box-two > img").attr("src").split('/').pop()) {
       //Get all classes into an array
       var classes = $("#box-one").attr("class").split(" ");
       //Grep out the classes you dont want and join it into a string seperated by space
       classes = $.grep(classes, function(class, index){
           return ($.inArray(class, classesToIgnore));
       }).join(" ");
       //Overwrite #box-three's classes. If you want to append them, loop over the array and use $("#box-three").addClass("className");
       $("#box-three").attr("class", classes);
    }

});

工作示例： http://jsfiddle.net/raPBy/

Answer 2

这将添加从框一到框三的所有类，并清除框一的类。如果要移动特定类，可以使用 jQuery 方法 $.addClass 和 $.removeClass。

$(document).ready(function() {
  var box1 = $('#box-one'),
      box2 = $('#box-two'),
      box3 = $('#box-three'),
      className = box1.attr('class');

  if(box1.find('img').attr('src') === box2.find('img').attr('src')) {
      box3.addClass(className);
      box1.attr('class', '');
  }
});

编辑

您可以使用以下方法仅比较文件名段：

var src1 = $('#box-one').attr('src').split('/').pop(),
    src2 = $('#box-two').attr('src').split('/').pop();

Answer 3

试试这个：

$(document).ready(function(){
  if($('#box-two img').attr('alt') == $('#box-one img').attr('alt')){//can use attr('src')
   $('#box-three').addClass($('#box-one').attr('class'));
    $('#box-one').removeClass();//if u want to remove class from #box-one
  }
});