jQuery - Копирование классов из одного элемента в другой, если условия верны - PullRequest
Новая
       13

jQuery - Копирование классов из одного элемента в другой, если условия верны

0 голосов
/ 10 апреля 2011

Основная идея того, что я после ..

В документе готовые копии классов из "# box-one" в "# box-three" 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.это будет сделано?

Ответы [ 3 ]

2 голосов
/ 10 апреля 2011 
$(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/

2 голосов
/ 10 апреля 2011

Это добавит все классы из первого блока в третий и очистит класс первого блока.Если вы хотите переместить определенные классы, вы можете использовать методы 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', '');
  }
});

Edit

Вы можете сравнить только имя файлаиспользование сегмента: 

var src1 = $('#box-one').attr('src').split('/').pop(),
    src2 = $('#box-two').attr('src').split('/').pop();
0 голосов
/ 10 апреля 2011

Попробуйте это: 

$(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
  }
});
...