0

私は現在、次のようなJavascriptを持っています。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
function changeSource(newSource) {
  document.getElementById('preview').src = newSource;
}
});
</script>

次に、次のようなHTMLがあります。

<table border=0 class="colors">
  <tbody>
    <tr>
      <td><a onclick="changeSource('http://www.test.com')"><img width="40" src="test.png"/></a></td>
    </tr>
  </tbody>
</table>

次に、Iframeセクション：

<table border=0>
  <tbody>
    <tr>
      <td><iframe id="preview" width="125" height="303" src="test.php" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" hspace="0" vspace="0"></iframe></td>
    </tr>
  </tbody>
</table>

ただし、タグ内の画像をクリックしても、Iframeのソースは変更されません。なんでこんな感じ？

4

2 に答える 2

2

onready関数で非表示にしたため、関数がローカルメソッドであるため、エラーが発生します。その例では、onready呼び出しは必要ありません。

<script>
$(document).ready(function(){
function changeSource(newSource) {
  document.getElementById('preview').src = newSource;
}
});
</script>

する必要があります

<script>
  function changeSource(newSource) {
      document.getElementById('preview').src = newSource;
  }
</script>

さらに良いことに、JavaScriptは必要ありません！使用されるはずのHTMLを使用してください。target属性を使用します。

<td><a href="http://www.example.com" target="preview"><img width="40" src="test.png"/></a></td>
于 2013-01-15T21:43:33.623 に答える
0

jqueryを使用しています。完璧に使用することをお勧めします。

$（document）.ready（function（）{
    //クラスの色でテーブルのアンカータグを選択します
    $（ "table.colors a"）。click（function（e）{
        e.preventDefault（）;
        var newSource = $（this）.attr（ "href"）;
        $（ "＃preview"）。attr（{"src"：newSource}）;
    }）;
}）;

onclick属性またはtarget属性を追加してhtmlをいじる必要はありません。ただし、htmlのターゲット属性が最も望ましいです。

<table border=0 class="colors">
  <tbody>
    <tr>
      <td><a href="http://www.test.com"><img width="40" src="test.png"/></a></td>
    </tr>
  </tbody>
</table>
于 2013-10-22T04:51:11.060 に答える