Question

我希望http://jsfiddle.net/tv0evg7d/1/在我的网站上实施。我复制了代码，以便我可以测试它是否正常工作。但是，当我点击我的网站上的节目时，图像没有加载，因为它在小提琴中工作。 jQuery库是从包含在页面中的头文件加载的。该库名为jquery.min.js。一切似乎都很好，但我不明白为什么它不起作用。请帮助我，并提前感谢。

来自小提琴的标记：

<input id="inputBox" value="http://www.clusterflock.org/wp-content/uploads/2010/09/owl-in-a-hat.jpg"/>
<button id="loadImage">Show</button>
<br/>
<img id="image" src="" alt="No image loaded"/>

代码

$("#loadImage").on('click', function(){
    $("#image").attr("src", $("#inputBox").val());
});

我的剧本：

<script>
$("#loadImage").click(function(){
    $("#image").attr("src", $("#inputBox").val());
});
</script>

<div id="wrapper">
  <div class="main-container height-auto" style="width: 20%">
    <?php include'side-menu.php'; ?>
  </div>
  <div class="main-container height-auto main-cont-adjust">
    <div class="container-title">
      <h3>Banner Ads on <?php echo $sf['si_name']; ?></h3>
    </div>
    <div class="divider"></div>
    <div class="member-index-container" align="right">
      <div class="mi-banner" style="margin-left: 0"><img src="images/adv-here2.png"></div>
    </div>
    <br>
    <?php echo $msg; ?>
    <div class="ads-box">
      <table class="table-list">
        <!--form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"-->
        <tr>
          <th class="left-align">Banner URL</th>
          <td class="left-align"><input type="text" name="burl" class="ad-field" required value="<?php echo $burl; ?>"></td>
        </tr>
        <tr>
          <th class="left-align">Target URL</th>
          <td class="left-align"><input type="text" name="turl" class="ad-field" required value="<?php echo $turl; ?>"></td>
        </tr>
        <tr>
          <th class="left-align">Duration</th>
          <td class="left-align"><select name="bprice" class="select-field" required>
              <?php while($bpf = $bpq->fetch()){ extract($bpf); ?>
              <option value="<?php echo $bp_id; ?>"><?php echo $bp_days; if($bp_days > 1){ echo " days at $"; }else{ echo " day at $"; } echo $bp_amount; ?></option>
              <?php } ?>
            </select></td>
        </tr>
        <tr>
          <th class="left-align">Wallet Balance: $<?php echo $pc_bal; ?></th>
          <th align="right"><input type="submit" name="buy_ad" value="Pay with Wallet" class="login-btn btn btn-black" style="width: 170px"></th>
        </tr>
        </form>

      </table>
    </div>
    <input id="inputBox" value=""/>
    <button id="loadImage">Show</button>
    <br/>
    <img id="image" src="" alt="No image loaded" />
    <div class="container-title">
      <h4>Ad Preview - This is how your Ad will look like</h4>
    </div>
    <div class="mi-banner" style="margin-left: 0; border: 1px solid #ddd;">
      <!--img src="" id="image" alt="Type or Paste banner URL and click on CHECK"-->
    </div>
  </div>
</div>

Answer 1

试试这个

$(document).ready(function() {
  $("#loadImage").on('click', function() {
    $("#image").attr("src", $("#inputBox").val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input id="inputBox" value="http://publicador.tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg"/>
<button id="loadImage">Show</button>
<br/>
<img id="image" src="" alt="No image loaded"/>

Answer 2

使用$(document).ready(function() {..});

功能

$(document).ready(function() {
  $("#loadImage").on('click', function() {
    $("#image").attr("src", $("#inputBox").val());
  });
});

Answer 3

从您的评论＆＃34;和header.php包含在此页面＆＃34;基本上，这段代码试图在包含jQuery之前运行。这似乎是你真正的问题。您应该在页面上包含jQuery，然后在标题上仅加载它（如果它尚不存在）

关于如何做最后一部分，你可以找到很多帖子。

使用jQuery加载图像而不刷新

3 个答案: