Jquery |将值添加到作为输入属性的名称

时间:2015-06-29 05:29:01

标签: javascript jquery

我想在点击按钮时添加$(this)值。

嗯。让我先向您展示我的代码。

$("#filenameList button").click(function(){
$(this).parent().remove();
});

$("#file").change(function(){
$("#filenameList div.notyet").remove();
for(var i = 0, len = this.files.length; i < len; i++){
    var file = this.files[i];
    var fr = new FileReader();
    fr.onload = (function (file) {
        return function(e) {
            var div = document.createElement("div");
            $(div).addClass("notyet").css({
                margin : "30px"
                ,position : "relative"
            });
            //var html = ['<input type="hidden"  name="screenshots_filename[]" value="' + file.name + '">'
            var html = ['<img src="" width="100%">'
                        ,'<input type="hidden" name="">'
                        ,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
                        ].join("");
            $(div).append(html);
            $(div).find("button").click(function(){
                $(this).parent().remove();
            });
            $(div).find("img").attr("src", e.target.result);
            $("#filenameList").append(div);
        }
    })(file);
    fr.readAsDataURL(file);
}
});

我想要做的就是通过单击按钮验证删除了哪个元素,以便将值添加到隐藏在html变量上方的name属性。

我该怎么做?

<div class="col-xs-4 vcenter from-group">
<h1>test</h1>
<input id="file" type="file" name="inputScreenshots[]" accept="image/*" multiple>
    <div id="filenameList" style="width : 400px">
    <?
    $str = $screenshot_urls;
    $arr = explode("+", $str);

    foreach ($arr as $filename) {
    ?>
    <div style="margin : 30px; position :relative;">
        <input type="hidden" name="screenshots_filename[]" value="<?=$filename?>">
        <img src="<?="http://cspmedia.net:3001/gp_images/ames/".$filename?>" width="100%">
        <button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <input type="hidden" name=""> // TODO HERE @@
    </div>
    <? } ?>
    </div>

好的,这是html代码。我很抱歉我很困惑。 我将todo移动到底部代码。 我想知道按钮点击的元素列表。

我这样想了。我是php的新手,所以我完全对客户端和服务器感到困惑,因为它们只是一页。

无论如何这是我想要的代码。对不起大家。

$("#filenameList button").click(function(){
var targetDom = document.getElementById( "filenameList" );
var targetInput = document.createElement("input");
targetInput.setAttribute("name", "del_img[]" );
targetInput.setAttribute("type","hidden");
targetDom.appendChild(targetInput);
//alert(targetInput.getAttribute("name"));
var filename = $(this).parent().find("input[name='screenshots_filename[]']").val();
alert(filename);
targetInput.setAttribute("value", filename);
$(this).parent().remove();
});

为什么我写这段代码是提交值并删除服务器中的文件。

if (isset($_POST["del_img"])) {
echo "<br/>del_img[] isset";
$tmp = $_POST["del_img"];

// TODO : delete images in server
foreach ($tmp as $value) {
    echo "<br/> Unlnk image ::: ".$value;
    unlink("http://cspmedia.net:3001/gp_images/games/".$value);
}
}

2 个答案:

答案 0 :(得分:0)

$(&#39;选择器(&#39;您要设置的值&#39;)&#39;)。attr(&#39; value&#39;,$(this)。 VAL());

例如,如下所示

&#13;
&#13;
$('input[type="hidden"]').attr('value',$(this).val());
&#13;
&#13;
&#13;

&#13;
&#13;
$(div).find("button").click(function(){
                $(this).parent().remove();
                // TODO : I want add $(this).val() to input name attribute
 });
&#13;
&#13;
&#13;

但请注意,在这里您将设置将要点击的按钮的。 因为在你的代码 $(this)将引用按钮,因为它正在选择它 .find(&#34;按钮&#34;)

答案 1 :(得分:0)

不确定是否要求在name之前将<input type="hidden" name="">设置为当前file,或之前用户选择file,而不是当前change事件?

以下解决方案尝试将name数组<input type="hidden" name="">内的html设置为当前file.name

$("#filenameList button").click(function(){
$(this).parent().remove();
});

$("#file").change(function(){
$("#filenameList div.notyet").remove();
for(var i = 0, len = this.files.length; i < len; i++){
    var file = this.files[i];
    var fr = new FileReader();
    fr.onload = (function (file) {
        return function(e) {
            var div = document.createElement("div");
            $(div).addClass("notyet").css({
                margin : "30px"
                ,position : "relative"
            });
            //var html = ['<input type="hidden"  name="screenshots_filename[]" value="' + file.name + '">'
            var html = ['<img src="" width="100%">'
                        ,'<input type="hidden" name="'+file.name+'">'
                        ,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>'
                        ].join("");
            $(div).append(html);
            $(div).find("button").click(function(){
                $(this).parent().remove();
            });
            $(div).find("img").attr("src", e.target.result);
            $("#filenameList").append(div);
        }
    })(file);
    fr.readAsDataURL(file);
}
});