javascript - これをJavaScriptで書く方法

Question

JavaScriptの関数に動的IDを挿入する際に問題があります：コード：

$('#scroll-up1, #scroll-down1').bind({ ..............

この例では、関数全体に送信するidの値を取得する関数が必要です

$('#scroll-up+id, #scroll-down+id').bind({ ..............

「または」として引用符で囲まれている問題は、私には機能せず、関数に正しく使用できません。このスクリプトでは、テキストをスクロールできますが、関数のIDから直接値を送信できないため、これにのみ問題があります。 。

すべてのコードを入力するために私のために編集してください：....。

PHP AND HTML CODE

<?php

$fil_comments=file("comments.txt");

for ($i=0;$i<sizeof($fil_comments);$i++)
{

$line=explode("~",$fil_comments[$i]);

if ($i%2==0)
{
$back=1;
}
else
{
$back=2;
}

?>


<li>
<div id="web_comment_<?php echo $back?>">

<div id="web_comment_name"><?php echo $line[0];?></div>
<div class="web_comment_texto" id="scroll<?php echo $i;?>"><?php echo $line[1];?></div>
<div class="web_comment_arrow" style="margin-left:260px;" id="scroll-down<?php echo $i;?>"><img src="imagenes/comments/arrow_up.png"></div>
<div class="web_comment_arrow" style="margin-left:288px;" id="scroll-up<?php echo $i;?>"><img src="imagenes/comments/arrow_down.png"></div>

</div>
</li>


<script>
scroll_diver(<?php echo $i;?>);
</script>



<?
}

?>

JavaScriptコードの機能

<script type="text/javascript">

function scroll_diver(id)
{





$(function() {




    var ele   = $('#scroll'+id);
    var speed = 30, scroll = 5, scrolling;

    $('#scroll-up'+id).mouseenter(function() {
        // Scroll the element up
        scrolling = window.setInterval(function() {
            ele.scrollTop( ele.scrollTop() - scroll );
        }, speed);
    });

    $('#scroll-down'+id).mouseenter(function() {
        // Scroll the element down
        scrolling = window.setInterval(function() {
            ele.scrollTop( ele.scrollTop() + scroll );
        }, speed);
    });


    //var a='#scroll-up'+id;
    //var b='#scroll-down'+id;


    var a='#scroll-up'+id;
    var b='#scroll-down'+id;



    //$('a,b').bind({
    //$('#scroll-up1, #scroll-down1').bind({
    //$('#scroll-up'+id+',#scroll-down'+id)

///ここに問題があります!!!

    $('#scroll-up'+id+', #scroll-down '+id).bind({



        click: function(e) {
            // Prevent the default click action
            e.preventDefault();
        },
        mouseleave: function() {
            if (scrolling) {
                window.clearInterval(scrolling);
                scrolling = false;
            }
        }
    });
});

}
</script>

基本的に、send idのJavaScript関数の行にある問題です。PHPコードを見ると、情報を含むスクロールのヒントを作成するためにbucleを使用し、それぞれで彼のコンテンツをスクロールできます。このために、関数をbucleに呼び出します。と：

<script>
    scroll_diver(<?php echo $i;?>);
    </script>

しかし、この行では、正常に動作するための正しい情報を送信しません。特定のIDにbucleを使用すると、正常に動作します。これは正常に動作しますが、上下にすばやくスクロールし、コントロールは正常に動作しません。

Answer 1

次に、次のようなものを確認する必要があります。

$('#scroll-up' + id + ', #scroll-down' + id).bind({ ..............

コメント投稿者が述べたように、jQueryセレクターは単なる文字列です。必要に応じて、それらを組み合わせることができます。この場合、ID（最も簡単な例では、数値またはその他の一意の識別子であると想定しています）を#scroll-upセレクターに連結しているため、IDが「1」の場合は次のようになります。事実上、次のような文字列。

'#scroll-up1, #scroll-down1'

文字列の連結が発生した後。

また、両方のオブジェクトに同じクラスを指定し、バインディング関数内でどのアイテムが呼び出されたかを調べて適切にスクロールを実行すると、おそらくより良い価値が得られることに注意してください。

だから、もしあなたが持っていたら：

<div class="container">
    <div id="scroll-up1" class="scroller"><!-- and code --></div>
    <div id="scroll-down1" class="scroller"><!-- and code --></div>
</div>

その場合、JavaScriptは次のようになり、連結の必要がなくなります。

$('.container').on("mouseover",'.scroller', function(){
    var thisId = $(this).attr("id");

    if(thisId == "scroll-up1"){
        // do your up-scroll
    } else if(thisId == "scroll-down1") {
        // do your down-scroll
    }
});

.on（）を使用しますが、これは.bind（）よりも優先されますが、イベントハンドラーをバインドするたびにセレクターを変更するのではなく、共通のクラスに基づいて処理するという考え方です。アイテム。

Answer 2

推奨される解決策: 共通機能にクラス名を使用する

$('.scroll-up, .scroll-down').bind({

あるいは：

$('.scroll').bind({

Answer 3

var id = 38;
$('#scroll-up' + id + ', #scroll-down' + id).bind({ ..............