カンマ区切りの値を入力フィールドに入力する

Question

フィールドを削除してフィールドに追加するスクリプトを作成するのは、しばらくの間苦労しています。ポイントは、divをクリックすると画像が内部にあり、クラスの一部がフィールドにコピーされるか、既にそこにコピーされている場合は削除されるということです。フィールドinput_8_3のすべての値は、最後のものを除いてスペースなしでコンマで区切る必要があります。値が1つしかない場合は、コンマを使用しないでください。フィールドinput_8_4と同じですが、そこには消去された値しか必要ありません。

さらに、クラスを変更するにはdivを、クリックを追加するにはdivを、クラスを削除するにはdivを追加する必要がありますが、問題をどの程度解決できますか？

Wordpressesフロントエンドのカスタムフィールドで画像を削除するには、これが必要です。 input_8_3はmetaに、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配列を使用する方が、JavaScript配列を変更するときにHTML値を使用して再生するよりも、実際にはHTMLを表示する必要があります。

何かが不明である場合、私に知らせて、あなたは2つのクリックと同じことで、基本的だ機能なので、最後の1を（クラスを追加）持っているまず第一にしようとしている