Question

我正在努力获取它，以便在单击特定<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>元素在美学上很好。检查元素时，我看到以下内容（看似正确）：

enter image description here

将最后一行javascript更改为：

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

onclick按预期工作，尽管所有链接都会显示最终图像（因为在循环之后，iHTML最终成为iHTML的最后一个实例）。

此代码有什么问题？

Answer 1

您的代码中存在许多问题。

请勿使用onclick属性。特别是当你可以直接分配给事件时，不要使用javascript手动编写onclick属性。
$('photogal').innerHTML = <img...../>错误，因为它是不正确的JS语法。尝试将该行直接重命名到您的JS中，它会抱怨<img.../>没有用引号括起来。
如果$是jQuery，则不需要使用$('photogal').innerHTML =...，您只需执行$('photogal').html("<img.../>")
您提到的最后一件事是因为您需要在循环中使用闭包来立即评估i的值。查找闭包以了解我的意思。

但我认为你的直接问题是＃2以上......

Answer 2

如此。实际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/

玩得开心

Answer 3

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

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

这缺少字符串周围的引号来将innerHTML设置为。

更新：

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

到：

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

Answer 4

$("item"+i).onclick = (function(iHtml) {
    return function() {
       $('photgal').innerHTML = iHTML;
    };
})(iHTML);

onclick没有在<li> </li>上工作

4 个答案: