Question

我正在使用followin jquery代码进行简单的产品详细信息切换。

$(document).ready(function() {
                    var numberArray = [1, 2, 3, 4, 5,18];
                    $.each(numberArray, function(index, value) {
                        $('.thumbs-' + value + ' img').hover(function() {
                            var url = $(this).attr('src');
                            $('#main-' + value).attr('src', url);
                        });
                    });
                });

但现在我注意到numberArray可能不是正确的方式。 numberArray表示我的wordpress设置中的产品ID。上传产品时会呈现每个产品ID。

如何让numberArray代表所有数字或如何编辑函数???我喜欢numberArray代表所有数字，比方说1-xxxxxx t

html代码

<div class="col-md-6">
  <div class="product  col-md-8 service-image-left">
    <center>
      <img id="main-18" src="http://localhost/..../site/wp-content/uploads/2015/02/warrior-bros.jpg" alt=""></img>
    </center>
  </div>

  <div class="container thumbs-18 col-md-4">
    <center>
      <a id="item-1" class="service1-item">
        <img src="http://localhost/..../site/wp-content/uploads/2015/02/warrior-bros.jpg" alt="warrior-bros"></img>
      </a>

      <a id="item-2" class="service1-item">
        <img src="http://localhost/.../site/wp-content/uploads/2015/02/frere-good.jpg" alt="frere-good"></img>
      </a>
    </center>
  </div>
</div>

问候

Answer 1

$(document).ready(function() {
   $('div[class*=thumbs-] img').hover(function() {
      var $thisImg = $(this),
          // travel up the DOM until we find the first ancestor with a thumbs-NUMBER class and extract such number
          thumbsClass = $thisImg.
                 closest($('div[class*=thumbs-]')).
                 attr('class').
                 split(' ').
                 filter(function(c) {
                    return c.indexOf('thumbs-') === 0;
                 });

      if (thumbsClass.length === 1) {
         var suffixNumber = thumbsClass[0].replace(/thumbs-/, ''); 
         $('#main-' + suffixNumber).attr('src', $thisImg.attr('src'));
      } 
  });
});

选择器[class^=thumbs-]查找所有具有以thumbs-开头的类的元素。

我没有检查.thumbs-SUFFIX中的后缀，看它是否真的是一个数字。您可以添加正则表达式来执行此操作，但我认为没有必要，因为例如，如果遇到.thumbs-world，则可能没有匹配的#main-world。

Answer 2

编辑Jose原始解决方案后，我得到了这个

$(document).ready(function() {
                    $('[class*=thumbs-] img').hover(function() {
                        var $thisImg = $(this);                  
                        // travel up the DOM until we find the first ancestor with a thumbs-NUMBER class and extract such number
                        suffixNumber = $thisImg.closest($('[class*=thumbs-]')).attr('class').replace(/thumbs-/, '').replace(/col-md-4/, '').replace(/container/, '');
                        console.log(suffixNumber);
                         console.log('test '+$thisImg.attr('src'));
    //                    $('#main-18').attr('src', $thisImg.attr('src'));
                        $('#main-' + suffixNumber).attr('src', $thisImg.attr('src'));
                    });
                });

但是只有最后一行没有用，虽然suffixNumber等于18（Console.log显示18为suffixNumber）??当对＃main-18进行硬编码时，它确实有效。

我如何检查所有数字

2 个答案: