0

我有一个包含列表项的列表，这些列表项看起来像表格中的一行（实际上它模仿了 iPhone 上的表格视图），并且希望使列表的每一行都是可选的，所以当用户点击它时我可以改变它的颜色，而且添加一个监听器来执行一些事件。

   <ul>
   <li>
    <img id = "image" src="image.jpg" />
    <h1 id = "Title">Title</h1>
        etc.
    </li>

我尝试添加 # 的 href 属性，<li>但没有奏效。我也试过这个：

      <ul>
       <li>
        <a  href="#" onclick="action();">
        <img id = "image" src="image.jpg" />
        <h1 id = "Title">Title</h1>
            etc.
        </li>

但这会将列表项中的每个单独项目变成一个可点击的链接，我怎样才能将每个列表项变成一个整体可点击的东西？

4

3 回答 3

1

你也可以试试这个（纯javascript）

window.onload=function(){
    var lis=document.getElementById('target_ul').getElementsByTagName('li');
    for(i=0;i<lis.length;i++) { 
        lis[i].onclick=myFunction;
    }
}

function myFunction()
{
    alert('This list item contains "'+this.innerHTML+'"');
}

演示。

于 2012-09-03T01:48:41.333 回答
1

纯 JavaScript

第一个答案特别依赖于 jQuery，我建议使用它，因为它大大减少了您必须编写的面向浏览器的 JavaScript 的数量（对于移动设备，您可以使用 jQuery mobile）。但是，由于您没有在问题中声明 jQuery，因此这是在纯 JavaScript 中执行此操作的最佳方法（避免内联事件处理程序）：

<script type="text/javascript">
  /// wrap all our code in our own scope so to keep things local
  (function(){
    /// store any previous handler on the window.onload
    var previousOnload = window.onload;
    /// create our ready function
    var fullyLoaded = function(){
      /// grab the UL element
      var li, ul = document.getElementById('target_ul');
      /// grab the LI elements
      var lis = ul.getElementsByTagName('li'), i = lis.length;
      /// loop each LI and apply a click handler
      while( i-- ){
        if ( !(li = lis[i]) ){ continue };
        /// internet explorer version
        if ( li.attachEvent ) {
          li.attachEvent('onclick', clickEvent);
        }
        /// pretty much everything else
        else if ( li.addEventListener ) {
          li.addEventListener('click', clickEvent);
        }
      }
    }
    /// create our click event listener
    var clickEvent = function( e ){
      /// fallback support for IE events
      if ( !e ){ e = window.Event };
      /// fallback support for IE .srcElement
      alert( 'Clicked! ' + ( e.target ? e.target : e.srcElement ) );
    }
    /// override/set the window.onload with our own listener for window load
    window.onload = function(){
      /// trigger the our onload function
      fullyLoaded();
      /// once we've triggered our code 'onload', fire anyone elses.
      if ( previousOnload ) {
        previousOnload();
      }
    }
  })();
</script>
<ul id="target_ul">
  <li>test</li>
  <li>test2</li>
</ul>

内联事件处理程序

显然，更简单的方法是将 LI 元素放置onclick在 LI 元素上，但是出于多种原因应避免使用内联事件侦听器：

  1. 您应该始终努力使您的设计/标记与您的代码分开 - 这有助于您的工作面向未来，并且意味着可以编辑标记而不必担心破坏脚本。

  2. 您只能为每个内联事件侦听器应用一个函数 - 这意味着与可能在相同元素上运行的其他插件或库一起运行您的代码变得更加困难......甚至使用额外的交互功能扩展您的代码。

  3. 由于通过内联事件侦听器绑定的 javascript 方法，在许多情况下都可能发生内存泄漏。（在手机上，内存使用可能是一件需要注意的大事，特别是如果您的页面要加载多次或有许多内联事件侦听器）。

  4. 内联事件侦听器需要访问全局函数，这意味着您的所有事件函数都必须是全局范围的一部分，这会污染全局命名空间（与其他代码发生命名冲突的可能性更大），这也常常导致代码管理起来很尴尬.

结论

必须实现上面冗长的纯 JavaScript 的绝对复杂性正是我推荐使用 jQuery mobile 的原因；）尽管它确实消除了所有的乐趣。

于 2012-09-03T01:21:32.140 回答
0

你可以用 jQuery 做到这一点：

$('ul li').click(function(){
   .......
})
于 2012-09-03T00:35:13.730 回答