javascript - Javascript onClick イベントを使用して、子要素の href に移動します

Question

奇妙なことに、親のli要素をクリックして機能するリンクを取得するために、javascriptをJqueryに使用することに固執しています。基本的に、liの任意の場所をクリックすると、ユーザーはその直接の子であるaのリンクに移動する必要があります。私が持っているものはうまくいかないようです。コード：

<ul>
<li onclick="location.href='$(this).children('a:first').attr('href')';">
    <a href="http://example.com/">link</a>
    </li>
    </ul> 

ありがとうございました！

Answer 1

onclick を使用せずに移動することで、コードを簡素化できますが、セレクターを使用してそのノードをターゲットにし、そこでクリック イベントを発生させます。

$(".myUl li").on("click", function() {
    location.href = $(this).children("a").attr("href");
});

しかし、CSS を使用してこれを解決する必要があります。display: block;上でも使用でき<a>、コンテンツを埋め、追加のパディングを追加し、基本的に div のように動作しますが、リンク機能は維持します。

Answer 2

href を一重引用符で囲むと、文字列として表示されます。また、他の一重引用符内で一重引用符を使用したため、文字列が途中で終了しました。文字通り、URL「$(this).children(」にアクセスしようとします。

代わりに、location.href を囲む一重引用符を削除してください。

<ul>
    <li onclick="location.href=$(this).children('a:first').attr('href');">
        <a href="http://example.com/">link</a>
    </li>
</ul> 

また、このようなインライン スクリプトは絶対に使用しないでください。ページの下部にスクリプト タグを追加し、li のクリック イベントにバインドするスクリプトをそこに配置することをお勧めします。

Answer 3

これと交換

    <li onclick="location.href=$(this).children('a:first').attr('href');">