我如何检查所有号码

Question

我正在使用以下 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-] 查找具有 class 并以 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 进行硬编码时，它确实起作用了。

我如何检查所有号码

How do i check for all numbers

arrays

wordpress

jquery