Question

我在表单中使用jquery来选择表单中的一个上传图像作为主图像。基本上，用户在上一步上传最多8张图像。然后向它们呈现图像的缩略图，每个都具有相应的隐藏输入，其值是图像的href。每个输入的名称是galleryImage1，galleryImage2等。我想要做的是点击其中一个图像，隐藏输入的名称变为primaryImage，并添加一类primaryImage。我有这个工作。然而，在这组图片中，应该只选择1。现在你可以选择所有这些并且动作会发生。如何更改此设置，以便一次只能应用于一个图像。然后问题是，如果用户改变主意，他们可以单击不同的图像，将删除类和名称，以及从第一个添加到隐藏输入的原始名称，并添加到第二个选项。

HTML

<div class="outputimages">
    <div class="galleryImage">
        <img src="http://example.com/images/12345.png" name="galleryImage1">
        <input type="hidden" name="galleryImage1" data-origname="galleryImage1" value="12345.png">
    </div>
    <div class="galleryImage">
        <img src="http://example.com/images/123456.png" name="galleryImage2">
        <input type="hidden" name="galleryImage2" data-origname="galleryImage2" value="123456.png">
    </div>
    <div class="galleryImage">
        <img src="http://example.com/images/1234567.png" name="galleryImage3">
        <input type="hidden" name="galleryImage3" data-origname="galleryImage3" value="1234567.png">
    </div>
</div>

所以如果点击第一个div就会看起来像这个

<div class="galleryImage primaryImage">
    <img src="http://example.com/images/12345.png" name="primaryImage">
    <input type="hidden" name="primaryImage" data-origname="galleryImage1" value="12345.png">
</div>

在选择第二个div时，它会变回原来的，第二个div会得到这些变化。我添加了data-origname属性，因此可以更改名称。

我现在的js。这些是动态生成的项目，因此我必须使用.on来影响更改。

$(document).on( 'click', '.galleryImage', function(){
    $(this).addClass('primaryImage');
    $(this).children().attr('name', 'primaryImage');    
});

Answer 1

一些建议：

首先，让我们考虑一下输入命名和HTML结构。您当前的命名方案无法扩展。我建议使用像这样的数组访问表示法：

<div class="galleryImage">
    <img src="http://example.com/images/12345.png">
    <input type="hidden" class="galleryImageInput" name="galleryImage[]" value="12345.png">
</div>

这消除了跟踪galleryImage1，galleryImage2等的需要。注意我还在输入中添加了一个类，以便更轻松地选择它并从{{name属性中删除<img>属性1}}（那里没有意义）。我还删除了数据属性，因为您将不再需要它们。

现在，让我们更改点击处理程序：

$(document).on( 'click', '.galleryImage', function(){
    // reset current primaryImage back to default
    $('.primaryImage')
        .removeClass('primaryImage')
        .find('.galleryImageInput')
        .attr('name', 'galleryImage[]');
    // set class and input name for clicked item
    $(this)
        .addClass('primaryImage')
        .find('.galleryImageInput')
        .attr('name', 'primaryImage');    
});

在发布数据时，您现在将有一个名为primaryImage的输入和一个位于键galleryImage的数组。这应该使数据在服务器端更容易使用，而不是单独处理galleryImage1，galleryImage2等，并检查每个数据是否已转换为primaryImage。

Answer 2

$(document).on( 'click', '.galleryImage', function(){
    $('.galleryImage').removeClass('primaryImage');
    $('.galleryImage').children().each(function(i, el){
       $(this).attr('name', $(this).attr('data-origname'));
    });
    $(this).addClass('primaryImage');
    $(this).children().attr('name', 'primaryImage');    
});

Answer 3

假设你按原样保留HTML，似乎你需要更多的东西才能真正恢复状态。

$( document ).on( 'click', '.galleryImage', function () {
  var $this = $( this ),
      clss  = 'primaryImage',
      name  = $this.data( 'name' );
  // If name hasn't been fetched yet, fetch and store it
  if ( !name ) $this.data( 'name', $this.attr( 'name' ) );
  // Reset old element
  $this
    .siblings( '.' + clss )
    .removeClass( clss )
    .children()
    .attr( 'name', name );
  // Update new element
  $this
    .addClass( clss )
    .children()
    .attr( 'name', clss );
} );

只允许一个div选择类jquery

3 个答案: