Question

当我click在图片上时，它应该将其添加到array，但max lenght的{{1}}为6，因此如果已经array中的{6}对象应该array并停止让用户alert出现在任何新图片上。

当我运行以下内容时，我可以继续添加图像，click永远不会发生。

alert

Answer 1

您必须检查已检查项目的长度，而不是空数组。

jQuery('body').on('change', '.masonry .item :checkbox', function () {
    var urls = [];
    var checkedItems = jQuery('.masonry .item :checkbox:checked'); // get the checked items
    if (checkedItems.length > 6) {                                 // if the checked items are more than 6, ...
        alert("No! No! No! Only 6!");
        jQuery(this).prop("checked", false);  //<<< UNCHECK THE ELEMENT JUST CHECKED SO THE COUNT REMAINS 6
    } else {
        checkedItems.each(function () {
            urls.push(jQuery(this).next('label').find('img').attr('src'));
        });
    }
});

Answer 2

使用if (urls.length > 6)代替if (jQuery(urls.length > 6))

这是按预期工作的。

var urls = [];
urls.length = 6;
document.write(urls.length);
document.write("<br>");
document.write(urls.length > 6)

/ *在方法之外声明url数组，使用click事件和event.preventDefault();来停止复选框以进行检查。 * /

var urls = [];

jQuery('body').on('click', '.masonry .item :checkbox', function (event) {
          //alert(urls.length);
            if (urls.length > 5) {
              alert("Puoi aggiungere un massimo di 6 immagini");
              event.preventDefault();
            } else {
            //alert(jQuery(this).next('label').find('img').attr('src'))
         urls.push(jQuery(this).next('label').find('img').attr('src'));

            }
          });

Answer 3

将urls数组声明为全局变量。删除urls.length = 6;它没有效果。将if条件修改为如果（urls.length＆gt; 6）

Answer 4

如果您需要最多6个src input的{{1}}，则可以创建object，您可以根据checked设置和删除项目状态。此外，通过使用click事件，您可以阻止该复选框不必要地checked（这将需要您手动取消选中它）。找到工作小提琴here和下面的工作片段。

var urls={};
console.clear();
jQuery('body').on('click', '.masonry .item :checkbox', function (e) {
	var this_id = jQuery(this).attr("id");
  var is_checked = jQuery(this).is(":checked");
   if(is_checked){
      if (Object.keys(urls).length < 6){
         urls[this_id] = jQuery(this).next('label').find('img').attr('src');
      } else {
      	alert("Puoi aggiungere un massimo di 6 immagini");
        e.preventDefault();
        return false;
      }
   } else {
   		delete(urls[this_id]);
   }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="masonry"><div class="item"><input type="checkbox" name="thing_1" value="valuable" id="thing_1"><label for="thing_1"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_2" value="valuable" id="thing_2"><label for="thing_2"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_3" value="valuable" id="thing_3"><label for="thing_3"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_4" value="valuable" id="thing_4"><label for="thing_4"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_5" value="valuable" id="thing_5"><label for="thing_5"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_6" value="valuable" id="thing_6"><label for="thing_6"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_7" value="valuable" id="thing_7"><label for="thing_7"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_8" value="valuable" id="thing_8"><label for="thing_8"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_9" value="valuable" id="thing_9"><label for="thing_9"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_10" value="valuable" id="thing_10"><label for="thing_10"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_11" value="valuable" id="thing_11"><label for="thing_11"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_12" value="valuable" id="thing_12"><label for="thing_12"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_13" value="valuable" id="thing_13"><label for="thing_13"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_14" value="valuable" id="thing_14"><label for="thing_14"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_15" value="valuable" id="thing_15"><label for="thing_15"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_16" value="valuable" id="thing_16"><label for="thing_16"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_17" value="valuable" id="thing_17"><label for="thing_17"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_18" value="valuable" id="thing_18"><label for="thing_18"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_19" value="valuable" id="thing_19"><label for="thing_19"><img class="img-responsive" src=""></label></div><div class="item"><input type="checkbox" name="thing_20" value="valuable" id="thing_20"><label for="thing_20"><img class="img-responsive" src=""></label></div></div>

Answer 5

据我了解，以下代码导致问题：

@derive

假设您有10张图片，那么每次点击，您都会推送10次。你应该只推送一次当前元素。尝试检查元素是否存在。如果是，请不要推它。

以下是我将如何做的一个示例小提琴。它不使用jQuery，但你可以相应地调整你的代码。

JSFiddle

修改

Updated Fiddle

问题是：

defmodule Api.Category do ... @derive {Poison.Encoder, only: [:id, :name]} # <- add this schema "categories" do ... end ... end

您在每次点击时初始化jQuery('.masonry .item :checkbox:checked').each(function() { urls.push(jQuery(this).next('label').find('img').attr('src')); });。所以它总是有jQuery('body').on('change', '.masonry .item :checkbox', function() { var urls = [];

它应该在处理程序的范围之外。

Answer 6

检查此解决方案，希望它有所帮助，您可以检查console.log以查看更新的网址和网址数。

第一个声明数组url在更改事件旁边。

在if内使用停止检查更多img

首先在else空的urls数组中（如果您取消选中一个复选框，在这种情况下您不想推送，您想要将其取出，使其变得简单只是清空该列表并添加每个检查到数组（肯定你需要改进这个，但现在这是最快的工作解决方案））

我在最后有两个控制台日志，因此您可以验证网址和长度。

var urls = [];
jQuery('body').on('change', '.masonry .item :checkbox', function() {
  if ($('input[type=checkbox]:checked').length > 6) {
    alert("Puoi aggiungere un massimo di 6 immagini");
    var $checkbox = $(this);
    // Ensures this code runs AFTER the browser handles click however it wants.
    setTimeout(function() {
      $checkbox.removeAttr('checked');
    }, 0);
    event.preventDefault();
    event.stopPropagation();
  } else {
      urls = [];
    jQuery('.masonry .item :checkbox:checked').each(function() {
      urls.push(jQuery(this).next('label').find('img').attr('src'));
    });
  }
    console.log('this urls-->' + urls);
    console.log('this urls length-->' + urls.length);
});

https://jsfiddle.net/dalinhuang/5rLh3bq2/4/

Answer 7

您可以在单击复选框时获取已选中元素的长度。这有点直截了当。我也阻止了启用6之后的任何复选框。

var urls = []; // if you wish to use it outside, make it global

$('.masonry :checkbox').on('click', function(e){

  var selected = $('.masonry :checkbox:checked');

  if( selected.length > 6 ){
    alert( 'Sorry, no more than 6' );
    e.preventDefault(); // stops the checkbox from being selected
    return;
  }

  // do what you wish with the selected ones
  // selected.each()

})

这是一个有效的代码：https://codepen.io/h3raldo/pen/vmOXrJ

数组最大长度不起作用

7 个答案: