0

I know this is pretty easy, and I am probably missing something very obvious, but here it goes.

I have an <ul> with a bunch of stuff inside.

I have set jquery, so that when <ul> is clicked, to assign it a class name, but it doesn't work.

$(document).ready(function() {
    $('#list').click(function(event) {
        event.stopPropagation();
        $(this).addClass('left');
    });
});

It works however, if the <ul> is wider than the stuff in it, and I click where there is no stuff.

Here is the HTML

 <ul id="list">
        <li>
          <a href="#" class="pos1">
            <span class="ei_preview"></span>
            <span class="ei_image"></span>
          </a>
          <div class="ei_descr">
            <h2>Name</h2>
            <h3>Last Name</h3>
            <p>
           Herp derp derp, hurr durr
            </p>
            <p>
           Herp derp derp, hurr durr
            </p>
          </div>
        </li>
        <li>
          <a href="#" class="pos2">
            <span class="ei_preview"></span>
            <span class="ei_image"></span>
          </a>
          <div class="ei_descr">
            <h2>Name</h2>
            <h3>Last name</h3>
            <p>
           Herp derp derp, hurr durr
            </p>
            <p>
            Herp derp derp, hurr durr
            </p>
          </div>

        </li>
</ul>

EDIT: After looking at the CSS, when I click a <li>, it doesn't work for the <ul> because <li> is set as position: relative;. Any idea how to overcome this without removing the position property ?

CSS as requested : http://hastebin.com/pahaxexabo.css

The .left is the class I want to assign to the <ul>.

4

1 に答える 1

1

HTMLがないと、JavaScriptをデバッグするのが難しくなります。

Java スクリプトを見ると、id 'list' を持つ要素がクリックされると、関数がトリガーされます。

ul タグに属性 id="list" がありますか?

ul タグをクリックしてイベントをトリガーする場合は、jquery の 2 行目を次のように変更します。

...
$('ul').click(function(event) {
...

また、以下のコードが必要な理由がわかりません。余分なようです

event.stopPropagation();

あなたのJavaScriptは問題ないようです。css に問題がある可能性があります。追加するクラスが既に追加されている HTML を記述して、ul に目的のスタイルがあるかどうかを確認してください。目的の css スタイルになったら、jquery をもう一度使用してみます。

于 2013-02-10T23:12:00.137 に答える