Javascript 只允许一个div选择jquery类

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

html

---

假设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 );
} );

---

假设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 );
} );

---

有几点建议：

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

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

---

发布数据时，您现在将有一个名为

primaryImage

的输入，并在键

gallerymage

处有一个数组。这将使数据在服务器端更易于处理，而不必单独处理

GalleryImage 1

、

GalleryImage 2

等，并检查是否已将每个数据转换为

primaryImage

以下几点建议：

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

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

---

发布数据时，您现在将有一个名为

primaryImage

的输入，并在键

gallerymage

处有一个数组。这将使数据在服务器端更易于处理，而不必单独处理

GalleryImage 1

、

GalleryImage 2

等，并检查每个数据是否已转换为

primaryImage

是的，这非常有效。我最初只是尝试用所选类更改输入的名称。这是更好的重置所有以确保。我将标记为已回答。你不能只针对所有galleryImage。primaryImage并更新子级，然后删除类吗？是的，这非常有效。我最初只是尝试用所选类更改输入的名称。这是更好的重置所有以确保。我将标记为已回答。而不是将所有galleryImage作为目标。你不能只将.primaryImage作为目标并更新子级，然后删除类？$（'galleryInput'）缺少一个DOT。我认为$（'galleryImage'）。删除类（'primaryImage'）；可以是$（'.primaryImage'）.removeClass（'primaryImage'）；多一点efficient@Huangism我同意。输入名称也是一样。现在可能不会太重要了，我认为OP已经实现了解决方案，只是实现了这个。这在邮寄上更有意义。我甚至没有想到阵列。我将把这作为我的答案。谢谢大家的意见。肯定有比我聪明得多的程序员。$（'galleryInput'）缺少一个点，我认为$（'galleryImage'）。removeClass（'primaryImage'）；可以是$（'.primaryImage'）.removeClass（'primaryImage'）；多一点efficient@Huangism我同意。输入名称也是一样。现在可能不会太重要了，我认为OP已经实现了解决方案，只是实现了这个。这在邮寄上更有意义。我甚至没有想到阵列。我将把这作为我的答案。谢谢大家的意见。有比我聪明得多的程序员，这是肯定的。奇怪的是，你使用数据获得名称，但使用属性设置名称。这是第一次击中元素。我们将初始名称与数据一起存储，以便在取消选择时可以还原它。这可能是不必要的，但是假设galleryImage的初始名称是必需的，我们会想要恢复它们。哦，nvm，我在想其他一些事情。奇怪的是，你使用数据获取名称，但使用属性设置名称。这是第一次命中元素。我们将初始名称与数据一起存储，以便在取消选择时可以还原它。这可能是不必要的，但假设galleryImage的首字母名称是必需的，我们会想要恢复它们。哦，nvm，我在想别的事情

$( 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 class="galleryImage">
    <img src="http://example.com/images/12345.png">
    <input type="hidden" class="galleryImageInput" name="galleryImage[]" value="12345.png">
</div>

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