1

<li>特定をクリックすると、同じページに画像が表示されるように取得しようとしています。

以下は、使用する画像を決定するコードです。うまく機能しているようですが、問題の原因となる場合に備えて含めています。

 <?php
  $j = 0;
  if (file_exists("u/".$_SERVER["REMOTE_ADDR"])) {
    $lines = array_reverse(array_unique(file("u/".$_SERVER["REMOTE_ADDR"])));
    $c = count($lines);
    $c = ($c > 20)?20:$c;
    for ($i = 0; $i < $c; $i++) {
      $lines[$i] = trim($lines[$i]);
      if (file_exists($lines[$i])) {
    echo "<li id=\"item$j\" title=\"".$lines[$i]."\" onclick=\"\"><a id=\"link$j\" href=\"#\">".$lines[$i]."</a></li>";
    $j++;
      }      
    }
   }
 ?>

次の JavaScript は、各要素に onclick を適用します。

 <script type="text/javascript">
    for (i = 0; i < <?php echo $j; ?>; i++) {
      iLINK = $("item"+i).get("title");
      iHTML = "<img src=\""+iLINK+"\" />";
      $("item"+i).setAttribute("onclick","$('photogal').innerHTML = " +iHTML);
       }
 </script>

ページをロードするとき、<li>要素は美的に優れています。要素を調べると、次のように表示されます(これは正しいようです):

ここに画像の説明を入力

JavaScript の最後の行を次のように変更する場合:

$("item"+i).setAttribute("onclick","$('photogal').innerHTML = iHTML");

期待どおりにonclick動作しますが、すべてのリンクによって最終的な画像が表示されます (ループの後、iHTML は最終的に iHTML の最後のインスタンスが何であったとしても)。

このコードの問題は何ですか?

4

4 に答える 4

4

それで。実際の MooTools 回答の時間 (MooTools 1.3+、理想的には 1.4.5 を想定):

これは多くのレベルで間違っています:

<script type="text/javascript">
    for (i = 0; i < <?php echo $j; ?>; i++) {
      iLINK = $("item"+i).get("title");
      iHTML = "<img src=\""+iLINK+"\" />";
      $("item"+i).setAttribute("onclick","$('photogal').innerHTML = " +iHTML);
       }
</script>

文字列としてエスケープされていない html、無効なイベント割り当て、インライン js など。

lis を含む ul または li に単一のイベントを割り当てたいとします。

あなたのdomが次のようになる場合：

<ul class="imageNav">
    <li title="someimage.jpg"><a href='#'>someimage</a></li>
    <li title="someimage.jpg"><a href='#'>someimage</a></li>
    ...
</ul>

<div id="photogal"></div>

次に、これをページ外の単一のイベント バインドで分離できます。

window.addEvent('domready', function() {
    // store the reference to target el
    var photogal = document.id('photogal');

    // delegate a single click event
    document.getElement('ul.imageNav').addEvent('click:relay(li > a)', function(event, el) {
        // stop the event.
        event && event.stop && event.stop();

        // have we got it cached?
        var img = el.retrieve('img');

        // if not, cache image
        if (!img) {            
            el.store('img', img = new Element('img', {
                src: el.getParent('li').get('title') // or el.get('text') -> faster
            }));
        }

        // empty target div and inject new image
        photogal.empty().adopt(img);
    });
});

ここで動作することを確認してください：http://jsfiddle.net/dimitar/n6BZD/

利点は、懸念事項の完全な分離、DRY です。要素IDなどは必要ありません。src をよりセマンティックな属性のようにdata-src、またはそれ自体のように配置できるためhref、ajs がない場合は劣化します。

ここにセマンティックソリューションがあります：http://jsfiddle.net/dimitar/n6BZD/1/

楽しんで

于 2012-06-19T16:53:15.870 に答える
4

あなたのコードには多くの問題があります。

  1. onclick属性を使用しないでください。特に、イベントに直接割り当てることができる場合は、JavaScript を使用して onclick 属性を手動で記述しないでください。
  2. $('photogal').innerHTML = <img...../>JS 構文が正しくないため、間違っています。その行を JS に直接書き込んでみてください<img.../>。引用符で囲まれていないと文句を言うでしょう。
  3. $jQuery を使用する必要がない場合は、$('photogal').innerHTML =...単に行うことができます$('photogal').html("<img.../>")
  4. あなたが言及した最後のことは、ループの値をiすぐに評価するためにクロージャーが必要だからです。私が何を意味するかを理解するために閉鎖を調べてください。

しかし、あなたの当面の問題は上記の＃2だと思います...

于 2012-06-19T04:05:05.920 に答える
1 
$("item"+i).onclick = (function(iHtml) {
    return function() {
       $('photgal').innerHTML = iHTML;
    };
})(iHTML);
于 2012-06-19T04:09:01.063 に答える
1

あなたは本質的に次のことを言っています。

$('photogal').innerHTML = <img src=\""+iLINK+"\" />

これには、innerHTML を設定するための文字列を囲む引用符がありません。

アップデート： 

$("item"+i).setAttribute("onclick","$('photogal').innerHTML = " +iHTML);

に： 

$("item"+i).setAttribute("onclick","$('photogal').innerHTML = '" + iHTML + "';");
于 2012-06-19T04:03:13.387 に答える