Question

我已经挣扎了一段时间来创建删除字段并将值添加到字段的脚本。关键是当我点击div时 - 里面会有图像，它会将其部分类复制到字段中，或者如果它已经复制到那里则删除。字段input_8_3中的所有值都需要以逗号分隔，除了最后一个之外没有空格，如果只有一个值，则不应该有任何逗号。与字段input_8_4相同，但我只需要删除值。

另外我需要div来改变点击类，一次点击添加类，另一个删除它，但这是我可以在多大程度上解决我的问题。

我需要这个来删除Wordpress前端中自定义字段中的图像。 input_8_3转到元和input_8_4到数组，以删除所选图像。

提前致谢！

(function($){
$('.thumbn').click(function() {
    var text = $(this).attr("id").replace('img-act-','')+',';
    var oldtext = $('#input_8_3').val();
    $('#input_8_3').val(text+oldtext);
});
})(jQuery);

(function($){
$('div.thumbn').click(function() {
    $(this).removeClass('chosen-img');
});
})(jQuery);

(function($){
$('.thumbn').click(function() {
    $(this).addClass('chosen-img');
});
})(jQuery);

.thumbn {
    width: 85px;
    height: 85px;
    background: #7ef369;
    float: left;
    margin: 10px;
}
.chosen-img.thumbn{background:#727272}
input{width:100%}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="text" id="input_8_3" readonly="" value="3014,3015,3016,3017,3018" class="form-control data_lable">
<input type="text" id="input_8_4" readonly="" value="" class="form-control data_lable">

<div class="user-profile-avatar user_seting st_edit">
<div>
<div class="thumbn" id="img-act-3014"></div>
<div class="thumbn" id="img-act-3015"></div>
<div class="thumbn" id="img-act-3016"></div>
<div class="thumbn" id="img-act-3017"></div>
<div class="thumbn" id="img-act-3018"></div>
</div>
</div>

编辑：我更改了input_8_3的值。 img-act-****中的所有数字和input_8_3中的值在加载时都是相同的。

Answer 1

我已经制作了它的JS工作。

https://jsfiddle.net/jatwm8sL/6/

我已添加以下内容：

var array = [3008,3009,3010,3011,3012];

$("#input_8_3").val(array.join());

并将您的点击功能更改为此

var array = [3008,3009,3010,3011,3012];
var array1 = [];

$("#input_8_3").val(array.join());

(function($){
$('div.thumbn').click(function() {
    var text = $(this).attr("id").replace('img-act-','');
  var oldtext = $('#input_8_3').val();
    if ($(this).hasClass('chosen-img'))
  {
    $('#input_8_3').val(text+oldtext);      
    var index = array.indexOf(text);
    if (index !== -1)
    {
        array.splice(index, 1);
    }

    array1.push(text);
    $(this).removeClass('chosen-img');
  }
  else
  {
    array.push(text);
    var index = array1.indexOf(text);
    if (index !== -1)
    {
        array1.splice(index, 1);
    }
    $(this).addClass('chosen-img');
  }
  $("#input_8_3").val(array.join());
  $("#input_8_4").val(array1.join());
  console.log(array1);
});
})(jQuery);

基本上，您需要检查它是否有类，然后删除它是否有，如果它没有，则添加它。

此外，使用javascript数组比使用html值更好，因为你改变了javascript数组，而HTML应该只显示它们。

如果有什么不清楚，请告诉我，我会尝试更好地解释自己

将逗号分隔的值添加到输入字段

1 个答案: