Question

DEMO

我试图一次只选择3个项目，截至目前所有元素都被选中。请指导

“如果用户想要选择其他元素，则首先要取消选择用户选择图像..“

JS : 
    var getTagsNameArray = [];
    $('.q2 .product-multiple').on('click', function(e) {
      var item = $(this).find('img').attr('name');
      if ($(this).hasClass('selectTag')) {
        $(this).removeClass('selectTag');
        getTagsNameArray.splice(getTagsNameArray.indexOf(item), 1);
      } else {
        $(this).addClass('selectTag');
        getTagsNameArray.push(item);
      }
      console.log(getTagsNameArray.join(', '));
    });

    $('.q2-get-answer').on('click', function() {
      console.log(getTagsNameArray.join(', '));
    })

Answer 1

正在向.selectTag元素添加selected。只需比较具有类selectTag的元素的长度。

修改：根据usetex的建议，如果所选元素的计数为3用户点击selected项，则unselect已实施。

var getTagsNameArray = [];
$('.q2 .product-multiple').on('click', function(e) {
  if ($('.selectTag').length < 3) {
    var item = $(this).find('img').attr('name');
    if ($(this).hasClass('selectTag')) {
      $(this).removeClass('selectTag');
      getTagsNameArray.splice(getTagsNameArray.indexOf(item), 1);
    } else {
      $(this).addClass('selectTag');
      getTagsNameArray.push(item);
    }
    console.log(getTagsNameArray.join(', '));
  } else {
    if ($(this).hasClass('selectTag')) {
      $(this).removeClass('selectTag');
      getTagsNameArray.splice(getTagsNameArray.indexOf(item), 1);
    } else {
      alert('3 items are already selected!')
    }
  }

});

$('.q2-get-answer').on('click', function() {
  console.log(getTagsNameArray.join(', '));
})

.product-multiple {
  float: left;
  margin: 10px;
}
.product-multiple img {
  width: 200px;
  height: 150px;
}
.product-multiple img:hover {
  cursor: pointer;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  cursor: pointer;
}
.digestive-tool {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
}
.digestive-tool .q1-answer li,
.digestive-tool .q2-answer li,
.digestive-tool .q3-answer li,
.digestive-tool .q4-answer li,
.digestive-tool .q5-answer li,
.digestive-tool .q6-answer li {
  list-style-type: none;
  display: inline-block;
}
.digestive-tool .q1-get-answer,
.digestive-tool .q2-get-answer,
.digestive-tool .q3-get-answer,
.digestive-tool .q4-get-answer,
.digestive-tool .q5-get-answer,
.digestive-tool .q6-get-answer {
  border: 1px solid #f00;
  padding: 10px;
  display: inline-block;
  cursor: pointer;
}
.digestive-tool .product,
.digestive-tool .product-multiple {
  display: inline-block;
}
.digestive-tool .product img,
.digestive-tool .product-multiple img {
  width: 150px;
  height: 180px;
  cursor: pointer;
}
.selectTag {
  border: 2px solid #00257a;
}
.q2-get-answer {
  margin-top: 20px;
  clear: left;
  border: 1px solid #900;
  background: #f00;
  cursor: pointer;
  width: 200px;
  padding: 20px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="q2">
  <label for="q2">how to keep a limit of only 3 selection values</label>
  <div class="q2-answer" id="q2">
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="gassy">
      <div>Gassy</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="fussy">
      <div>Fussy</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="diahrea">
      <div>Diahrea</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="spitup">
      <div>Spit Up</div>
    </div>
    <div class="product-multiple">
      <img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="constipation">
      <div>Constipation</div>
    </div>
  </div>
  <div class="q2-get-answer">
    Q3 click me
  </div>
</div>

Shady Alset

Answer 2

您可能需要在addClass之前添加以下检查。

else if ($('.selectTag').length < 3)

完整的代码块。

if ($(this).hasClass('selectTag')) {
    $(this).removeClass('selectTag');
    getTagsNameArray.splice(getTagsNameArray.indexOf(item), 1);
} else if ($('.selectTag').length < 3) {
    $(this).addClass('selectTag');
    getTagsNameArray.push(item);
}

jQuery选择最多3个项目

2 个答案: