Question

我是jQuery的新手，面对这个问题：

我有这个圆圈网格，我在点击div中的一个小按钮时使用图像上传器功能。

我想把图像放在我单击按钮的div中，但我总是在第一个div中得到图像。

HTML

<body>
<div class='content'>

  <section class='example'>
    <div class='gridly'>
        <div class='brick small'>
            <div id="output"></div>
            <a class="topopup" href="#">Z</a> 
            <a class='delete' href='#'>&times;</a>

      </div>
      <div class='brick small'>
        <div id="output"></div>
        <a class="topopup" href="#">Z</a> 
        <a class='delete' href='#'>&times;</a>
      </div>
      <div class='brick small'>
        <div id="output"></div>
        <a class="topopup" href="#">Z</a> 
        <a class='delete' href='#'>&times;</a>
      </div>
      <div class='brick small'>
        <div id="output"></div>
        <a class="topopup" href="#">Z</a> 
        <a class='delete' href='#'>&times;</a>
      </div>
      <div class='brick small'>
        <div id="output"></div>
        <a class="topopup" href="#">Z</a> 
        <a class='delete' href='#'>&times;</a>
      </div>
      <div class='brick small'>
        <div id="output"></div>
        <a class="topopup" href="#">Z</a> 
        <a class='delete' href='#'>&times;</a>
      </div>
      </div>

    <p class='actions'>
      <a class='add button' href='#'>Add</a>
    </p>
  </section>

的JavaScript

$(document).ready(function() { 
    var options = { 
        target:   '#output',   // target element(s) to be updated with server response 
        beforeSubmit:  beforeSubmit,  // pre-submit callback 
        success:       afterSuccess,  // post-submit callback 
        resetForm: true        // reset the form after successful submit 
    }; 

    $('#MyUploadForm').submit(function() { 
        $(this).ajaxSubmit(options);        
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
}); 

function afterSuccess() {
    $('#submit-btn').show(); //hide submit button
    $('#loading-img').hide(); //hide submit button
}    
$('#submit-btn').hide(); //hide submit button
$('#loading-img').show(); //hide submit button
$("#output").html("");

Answer 1

您的问题是output id。

的div

我的HTML应该是唯一的。

您在脚本（target: '#output'）选项

中使用它

$("#output")＆lt; - 获取与条件匹配的第一个元素（带output id的第一个div）

更改

<div id="output"></div>
<div id="output"></div>
<div id="output"></div> and so on

与

<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>

以这种方式获取jquery

$("#output1")

并在您的选项中更改target参数

请参阅here了解文档

Jquery图像上传器

1 个答案: