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

你的代码有很多问题。

  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 回答
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本身的属性，a这样当没有 js 时它会降级。

所以这里是语义解决方案：http: //jsfiddle.net/dimitar/n6BZD/1/

玩得开心

于 2012-06-19T16:53:15.870 回答
1

您本质上是在说以下内容：

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

这缺少将字符串设置为的引号。

更新： 

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

到： 

$("item"+i).setAttribute("onclick","$('photogal').innerHTML = '" + iHTML + "';");
于 2012-06-19T04:03:13.387 回答
1 
$("item"+i).onclick = (function(iHtml) {
    return function() {
       $('photgal').innerHTML = iHTML;
    };
})(iHTML);
于 2012-06-19T04:09:01.063 回答