javascript - 第二次单击时 jQuery 数组不会被删除

Question

<强> DEMO

嗨，

单击图像时，我将图像名称(属性)传递给数组，该数组工作正常，但每当用户再次单击取消选择时，我会尝试删除当前名称($(this))，其中没有发生，而是被完全删除(空数组)。 并且每次为第一个元素附加逗号时:-(

JS : 
 questionCount = 0;
        $('.q2 .product-multiple').on('click',function(e){
            if($(this).hasClass('selectTag')){
                questionCount--;
                $(this).removeClass('selectTag');

                removeItem = "Removing Clicked element Name -  " + $(this).find('img').attr('name')
                alert(removeItem);
            console.log("Should be Removed here.. " +" "+ getTagsNameArray)


            } 
            else {
                questionCount++;
                $(this).addClass('selectTag');
                getTagsNameArray = new Array();
                getTagsName = getTagsName + "," + $(this).find('img').attr('name');
                getTagsNameArray.push(getTagsName)
        console.log("Passing Value in Array - " +" "+ getTagsNameArray)

            }
            });

        $('.q2-get-answer').on('click', function(){
            getTagsName = getTagsName +" / "+ $('.q2-answer').find('.product-multiple.selectTag img').attr('name');
            alert(getTagsName)
            console.log(getTagsName);
        })


html : 
<div class="q2">
            <label for="q2">What type of symptoms that your child has?</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>

谢谢解答!!

我可以为此创建一个通用函数吗，因为有很多具有相同功能的问题？ 有什么想法吗 ？

再次感谢

Answer 1

试试这个。

var getQ1Answer, getQ2Answer, getQ3Answer, getQ4Answer, getQ5Answer, getQ6Answer, sliderValue, selectMonth, q1answer, getTags;
var getTagsName = "";
var getTagsNameArray = new Array();
questionCount = 0;
$('.q2 .product-multiple').on('click', function(e) {
  if ($(this).hasClass('selectTag')) {
    questionCount--;
    $(this).removeClass('selectTag');
    var index = getTagsNameArray.indexOf($(this).find('img').attr('name')); 
    if (index !== -1) {
      getTagsNameArray.splice(index, 1);
    }
  } else {
    questionCount++;
    $(this).addClass('selectTag');
    getTagsNameArray.push($(this).find('img').attr('name'));
  }
});