Javascript 第二次单击时未删除jQuery数组

嗨

单击图像时，我会将图像名称属性传递给一个数组，该属性工作正常，但每当用户再次单击取消选择时，我都会尝试删除当前名称$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>

谢谢你的回答

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

---

再次感谢

您将向数组追加一个字符串，从而将数组转换为一个字符串：getTagsName+， 您需要使用getTagName.push$this.find'img.attr'name向数组添加新元素，而不是向数组中追加字符串。可以使用indexOf和splice删除项。 如果要打印数组，只需使用getTagsName.join。这将把数组变成逗号分隔的字符串。

试试这个

变量getQ1Answer、getQ2Answer、getQ3Answer、getQ4Answer、getQ5Answer、getQ6Answer、sliderValue、selectMonth、q1answer、getTags； var getTagsName=； var gettagsnamerary=新数组； 问题计数=0； $'.q2.产品多个'。单击，函数E{ 如果$this.hasClass'selectTag'{ 问题计数-； $this.removeClass'selectTag'； var index=gettagsnamerary.indexOf$this.find'img.attr'name'； 如果索引！==-1{ gettagsnamerary.index，1； } }否则{ 问题计数++； $this.addClass'selectTag'； gettagsnamerary.push$this.find'img.attr'name'； } };

---

您需要在函数外部声明数组。您使用推送数组中的项，这是不需要的。您的JS代码如下所示：

var getQ1Answer, getQ2Answer, getQ3Answer, getQ4Answer, getQ5Answer, getQ6Answer, sliderValue, selectMonth, q1answer, getTags;
var getTagsName = "";
var getTagsNameArray = new Array();     // here you should create an array
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);
        var doubleSelect = $(this).find('img').attr('name');
        var index = getTagsNameArray.indexOf(doubleSelect);
        console.log(index)
        if (index > -1) {
            getTagsNameArray.splice(index, 1);
        }
        console.log("Should be Removed here.. " +" "+ getTagsNameArray)
    } 
    else {
        questionCount++;
        $(this).addClass('selectTag');
        getTagsNameArray.push($(this).find('img').attr('name'));            //change is here
        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);
})

首先，你不应该有这么多的变量。只是一个变量，用于将项从阵列推送/拼接到阵列

=>拼接方法通过删除现有元素和/或添加新元素来更改数组的内容

语法：array.strippestart，deleteCount[，item1[，item2[，…]]

var gettagsnamerary=[]； $'.q2.产品多个'。单击，函数E{ var item=$this.find'img'.attr'name'； 如果$this.hasClass'selectTag'{ $this.removeClass'selectTag'；

---

gettagsnameray.patchegettagsnameray.indexOfitem，1； }否则{ $this.addClass'selectTag'； gettagsnameray.pushitem； } console.loggetTagsNameArray.join'，'； }; $'.q2获取答案'。单击，函数{ console.loggetTagsNameArray.join'，'； } .产品倍数{ 浮动：左； 利润率：10px； } .产品多重img{ 宽度：200px； 高度：150像素； } .产品多重img：悬停{ 光标：指针； } .ui状态默认值， .ui小部件内容.ui状态默认值， .ui小部件标题.ui状态默认值{ 光标：指针； } .消化工具{ 填充：10px； 利润率：10px； 边框：1px实心ccc； } .消化工具。q1回答李， .消化工具。第二季度回答李， .消化工具。第三季度回答李， .消化工具。第四季度回答李， .消化工具。q5回答李， .消化工具.问题6回答李{ 列表样式类型：无； 显示：内联块； } .消化工具。q1获得答案， .消化工具。第二季度获得答案， .消化工具。第三季度获得答案， .消化工具。第四季度获得答案， .消化工具。q5获得答案， .消化工具.问题6：获取答案{ 边框：1px实心f00； 填充：10px； 显示：内联块； 光标：指针； } .消化工具.产品， .消化工具.产品多{ 显示：内联块； } .消化工具.产品img， .消化工具.产品多重img{ 宽度：150px； 高度：180像素； 光标：指针； } .选择标签{ 边框：2个实心00257a； } .q2获得答案{ 边缘顶部：20px； 清除：左； 边框：1px实心900； 背景：f00； 光标：指针； 宽度：200px； 填充：20px； 颜色：fff； } 您的孩子有什么样的症状？ 气体 挑剔的 迪亚里亚 吐 便秘 Q3点击我

---

这是因为每次取消选择$'.q2.product multiple'时，都会创建一个新的getTagsNameArray数组。请参阅单击处理程序中的else语句

如果我正确理解了您的问题，您想要一个包含所选图像的名称属性的数组吗？在这种情况下：

在单击处理程序外部声明并创建getTagsNameArray 单击图像后，将名称添加到数组中 再次单击以取消选择，在数组中查找名称并 移除它。 这是一个现场演示

您可以使用array.push、splice、join

---

问题是什么？无法获取..请检查console.log->每当用户选择图像名称属性添加到数组中时，当用户取消选择图像名称属性必须从ArrayTanks中删除时，1的用途是什么？getTagsNameArray.indexOfitem，1的用途是1，我们还可以创建一个用于其他问题的公共函数吗？请指教

var getTagsNameArray = [];

$('.q2 .product-multiple').on('click', function(e) {
  // get the name of the image
  var name = $(this).find('img').attr('name');

  if($(this).hasClass('selectTag')) {
    // it was selected, now unselected
    // so remove its name from the array
    // see: http://stackoverflow.com/questions/5767325/remove-a-particular-element-from-an-array-in-javascript
    $(this).removeClass('selectTag');
    var index = getTagsNameArray.indexOf(name);
    getTagsNameArray.splice(index, 1);
  } else {
    // selected it
    // and add name to array
    $(this).addClass('selectTag');
    getTagsNameArray.push(name);
  }
});

$('.q2-get-answer').on('click', function(){
  alert('selected: ' + getTagsNameArray.join(', '));      
})

var selected = [];

$('.q2 .product-multiple').on('click',function (e) {
    if($(this).hasClass('selectTag')){
        $(this).removeClass('selectTag');
        var name = $(this).find('img').attr('name');

        // remove the name from selected
        for (var i=0; i<selected.length; i++) {
            if (name === selected[i]) {
                selected.splice(i, 1);
            }
        }

        console.log("Should be Removed here.. ", name);
        console.log("Passing Value in Array - ", selected.join(', '))
    }
    else {
        $(this).addClass('selectTag');

        var name = $(this).find('img').attr('name');
        selected.push(name);
        console.log("Passing Value in Array - ", selected.join(', '))
    }
});

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