0

このコードがあり、画像の選択が解除されたとき (トグル時) に選択 (テキスト ボックス) を削除したいと考えています。また、テキストボックスを非表示にして、「送信」時に選択した画像のみを取得できるようにすることはできますか?

最善のアプローチは何ですか？

<html>
<head>
<style type="text/css">
div img {
    cursor: pointer;
    border: 1px solid #f00;
}

img {
  padding: 5px;
}
img.clicked {
  padding: 0;
  border: 5px solid blue;
}

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
    if (id != '' && !document.getElementById('input_'+id)) {
        var img = document.createElement('input');
        img.type = 'text';
        img.id = 'input_'+id;
        img.name = 'images[]';
        img.value = id;

        document.imageSubmit.appendChild(img);
    }
}
$(document).ready(function(){
    $('#jqueryimages img').click(function(){
        setFormImage(this.id);
    });
});

</script>
</head>
<body>
<pre>


</pre>
<div id="jqueryimages" style="float: left; width: 49%;">
    <h1>Image Selection</h1>
    5. <img src="http://www.handmadepotery.com/home.gif" id="img-5"/>
    <br/>
    6. <img src="http://www.handmadepotery.com/home.gif" id="img-6"/>
    <br/>
    7. <img src="http://www.handmadepotery.com/home.gif" id="img-7"/>
    <br/>
    8. <img src="http://www.handmadepotery.com/home.gif" id="img-8"/>
</div>
<script>
ims = document.getElementsByTagName("img");

for( i=0 ; i<ims.length ; i++ ){
  ims[i].onclick=function() {
    if (this.className == "clicked") {
      this.className = "";
    } else {
      this.className = "clicked";
    }
  };
}
</script>

<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
    <input type="submit" value="View Selected"/>
</form>
</body>
</html>
4

3 に答える 3

0

私はよりバックボーン的なアプローチを取り、興味のあるフォームまたはフォームの一部を再レンダリングするだけです。また、jquery を使用する場合は、jquery を使用して、フォームへの変更:

http://jsfiddle.net/a9qdr/1/

$(document).ready(function(){
    var allImages = $("#jqueryimages img");
    var theForm = $("form[name=imageSubmit]");

    var renderImageInputs = function(){

        // empty the form
        theForm.find("[name^=images]").remove();

        // fill it back up
        allImages.filter(".clicked").each(function(){
            var id = $(this).attr("id");

            $("<input>", {
                type: 'text',
                id: 'input_' + id,
                name: 'images[]',
                value: id
            }).appendTo(theForm);
        });
    };

    // bind to clicks on the images    
    allImages.click(function(){
        $(this).toggleClass("clicked");
        renderImageInputs();
    });
});
于 2013-07-11T02:12:48.593 に答える
0

「クリーンアップ」の提案と同様に、次のすべてを削除できます。

ims = document.getElementsByTagName("img");
for( i=0 ; i<ims.length ; i++ ){
  ims[i].onclick=function() {
    if (this.className == "clicked") {
      this.className = "";
    } else {
      this.className = "clicked";
    }
  };
}

これとともに：

$("img").toggle(
function () {
    $(this).addClass("clicked");
},
function () {
    $(this).removeClass("clicked");
});

ここに配置：

$(document).ready(function(){
    $('#jqueryimages img').click(function(){
        setFormImage(this.id);
    });
// PUT HERE
});
于 2013-07-11T02:09:31.893 に答える