Javascript JQuery:DOM遍历测试

我正在编写一个函数来更改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'); }

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

我得到的日志输出如下：

thisElement = 141

我几乎可以肯定DOM遍历是正确的，但是如果没有尝试和错误，我就无法测试它，这是非常令人沮丧的。有没有更好的方法来测试这样的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'); }

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

但我不想用身份证。DOM如下所示：

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'); }

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

任何帮助都将不胜感激

编辑

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

编辑2

---

添加了一个来显示问题。

基本问题是

.thumbnail\u选择器

不是

.col-sm-9

的同级，而是

.form组

的同级（在当前代码中）

因此，

最近的（'.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');

在JSFiddle进行演示： JQuery：

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

---

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

啊！非常感谢你！这很有道理。我以为我疯了。