JQuery: DOM 遍历测试

Question

我正在编写一个函数来更改 JQuery 中的缩略图选择。当我有更具体的选择器时它工作正常，但我正在尝试这样做 class-based 以防止重复我自己。

目前看起来像这样：

function changeImage(thisElement) {
    var src = $(thisElement + ' option:selected').val();
    console.log('thisElement = ' + src);
    $(thisElement).parent().parent().parent().next('.selector_thumbnails img').css('display', 'none');
    $(thisElement).parent().parent().parent().next('.selector_thumbnails img#' + src).css('display', 'block');
  }
  $('.thumbnail_selector').change(function() { changeImage('.thumbnail_selector'); });
  if ($('.thumbnail_selector').length) { changeImage('.thumbnail_selector'); }

我得到这样的日志输出：

thisElement = 141

我几乎可以肯定 DOM-遍历是正确的，但我无法在没有反复试验的情况下对其进行测试，这非常令人沮丧。有没有更好的方法来测试这样的 JQuery 函数？

工作版本如下所示：

$('#document_cover_id').change(function() {
    var src = $(this).val();
    $('#thumbcover img').css('display', 'none');
    $('#cover_thumb'+src).css('display', 'block');
});

但我不想使用 ID。 DOM 看起来像这样：

如有任何帮助，我们将不胜感激。

编辑

自工作版本以来 ID 已更改。

编辑 2

添加了一个 JSFiddle 来说明问题。

Answer 1

基本问题是 .thumbnail_selector 不是 .col-sm-9 的兄弟姐妹，而是 .form-group 的兄弟姐妹（ 在您当前的代码中 ).

所以 .closest('.col-sm-9').next(..) 不起作用。

您的整个脚本可以简化为

function changeImage() {
    var self = $(this),
        src = this.value,
        thumbs = self.closest('.form-group').siblings('.selector_thumbnails');

   thumbs
       .find('img')
       .hide()
       .filter('#' + src)
       .show();
}

$('.thumbnail_selector')
    .change(changeImage)
    .trigger('change');

演示在 https://jsfiddle.net/gaby/2wpm2pst/7/

Answer 2

JSFiddle：https://jsfiddle.net/pmytmqou/ JQuery:

function changeImage(thisElement) {
var src = $(thisElement + ' option:selected').val();
console.log('thisElement = ' + src);
$('.selector_thumbnails > img').css('display', 'none');
$('#' + src).css('display', 'block');
}
$('.thumbnail_selector').change(function () {
    changeImage('.thumbnail_selector');
});
if ($('.thumbnail_selector').length) {
    changeImage('.thumbnail_selector');
}

id 选择器在页面中应该是唯一的，因此您可以只使用 #id 选择器。

回答您的测试问题 JQuery 有一个名为 QUnit 的单元测试套件。你可以在这里找到更多相关信息：qunitjs.com/

JQuery: DOM 遍历测试

JQuery: DOM traversal testing

javascript

jquery

dom

ruby-on-rails-4