javascript - jQuery 选择最多 3 个项目

Question

DEMO

我试图一次只选择 3 个项目，到目前为止，所有元素都已被选择。请指导

"If user want to select other element first user want to unselect the selected Images.. "

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

As you are adding .selectTag to the selected element. Simply compare length of the elements having class as selectTag.

编辑:按照Shady Alset的建议, 如果所选元素的数量为 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>

Fiddle here