JQuery：DOM遍历测试答案

【问题标题】：JQuery: DOM traversal testingJQuery：DOM遍历测试
【发布时间】：2015-03-15 23:53:33
【问题描述】：

我正在编写一个函数来更改 JQuery 中的缩略图选择。当我有更具体的选择器时它工作得很好，但我试图基于类来防止重复自己。

目前看起来是这样的：

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 来显示问题。

【问题讨论】：

标签： javascript jquery dom ruby-on-rails-4

【解决方案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/的演示

【讨论】：

啊！非常感谢！这很有意义。我以为我要疯了。

【解决方案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/

【讨论】：