2

私はこのJavaScriptを持っています:

<script type="text/javascript">
$(document).ready(function($) {
        $('#target-share ul li').click(function() {
            $('input#shareto').val($(this).data('val'));
        });
    });
</script>

そしてそれは私が期待したように本当に機能します。しかし、ドロップダウンアニメーションを実行するためにこれを別のJavaScriptに追加すると、そのJavaScriptは機能しなくなります:

<script type="text/javascript">
$(document).ready(function() {
    $("#select-shareto a").click(function () {
        var newClass = $(this).find("span").attr('class');
        var newText = $(this).find("span").text();
        $("#select-shareto a").removeClass("selected");
        $(this).addClass("selected");
        $("a#to-chosen span").removeClass().addClass(newClass).text(newText);
        $("a#to-chosen").toggleClass("opened");
        $('#select-shareto').slideToggle('fast');
        return false;
    });

    $('a#to-chosen').click(function() {
        $(this).toggleClass("opened");
        $('#select-shareto').slideToggle('fast', function() {
            // Animation complete.
        });
    });
});
</script>

これらのJavaScriptは、実際にこのHTMLコードに影響を与えます。

<div id="target-share">
<a href="#" title="" id="to-chosen" class="default"><span class="to-admin">Admin</span></a>
<ul id="select-shareto">
<li data-val="0-1">
<a href="#" title="" class="selected"><span class="to-Finance">Finance</span></a>
</li>
<li data-val="1-1">
<a href="#" title=""><span class="to-admin-private">Admin Private</span></a>
</li>
<li data-val="1-0">
<a href="#" title=""><span class="to-ceo">CEO</span></a>
</li>
<li data-val="0-0">
<a href="#" title=""><span class="to-ceo-private">CEO Private</span></a>
</li>                                    
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->

これらの2つのJavaScriptを並べて動作させる方法はありますか?ありがとう。

4

2 に答える 2

7
$("#select-shareto a").click(function () {
    ...
    return false;
});

これにより、このイベントのそれ以上の伝播を停止します。このイベントの他のハンドラーはclick呼び出されなくなります。代わりに、これを使用してください:

$("#select-shareto a").click(function (e) {
    e.preventDefault();
    ...
});

jsfiddle.netでのデモ

于 2012-07-27T18:27:28.823 に答える
0

コメントアニメーションが完了した場所にコードを挿入しようとしたと仮定します。その場合は、コードを配置するだけです。$('#target-share ul li').click(function() { $('input#shareto').val($(this).data('val'));});

コードはすでにラップされている$(document).readyので、別のコードは必要ありません。

于 2012-07-27T18:26:22.300 に答える