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

最初の答えは特にjQueryに依存しています。これは、作成する必要のあるブラウザーを対象としたJavaScriptの量を大幅に削減するためです（モバイルの場合はjQuery mobileを使用できます）。ただし、質問でjQueryを記述していないため、純粋なJavaScriptでjQueryを実行するための最良の方法です（インラインイベントハンドラーを回避します）。

<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>

インラインイベントハンドラー

明らかに、より簡単な方法はonclickLI要素に配置することですが、インラインイベントリスナーはさまざまな理由で避ける必要があります。

  1. デザイン/マークアップをコードから分離するように常に努力する必要があります。これは、将来を見据えた作業に役立ち、スクリプトを壊すことを恐れずにマークアップを編集できることを意味します。

  2. インラインイベントリスナーごとに適用できる関数は1つだけです。つまり、同じ要素で動作する可能性のある他のプラグインやライブラリと一緒にコードを実行したり、追加の相互作用機能を使用してコードを拡張したりすることがはるかに困難になります。

  3. インラインイベントリスナーを介してJavaScriptメソッドがバインドされているために、メモリリークが発生する可能性のある状況は数多くあります。（携帯電話では、特にページが何度も読み込まれる場合や、インラインイベントリスナーが多数ある場合は、メモリ使用量に注意する必要があります）。

  4. インラインイベントリスナーはグローバル関数にアクセスする必要があります。つまり、すべてのイベント関数は、グローバル名前空間を汚染するグローバルスコープの一部である必要があります（他のコードとの名前の衝突の可能性が高くなります）。これにより、管理が非常に厄介なコードになることがよくあります。 。

結論

上記の長く曲がりくねった純粋なJavaScriptを実装しなければならないという非常に複雑なことは、jQuery mobileの使用をお勧めする理由です;）それはすべての楽しみを奪いますが。

于 2012-09-03T01:21:32.140 に答える
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 に答える
0

これはjQueryで実行できます。

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