jQuery를 사용하여 여러 요소에 대한 바인딩 기능

StackOverflow https://stackoverflow.com/questions/868975

  •  22-08-2019
  •  | 
  •  

문제

jQuery 에이 작은 문제가 있습니다. 다음과 같은 일을해야합니다.

$(document).ready(function(){
    links = {};
    links.a = "Link a";
    links.b = "Link b";
    links.c = "Link c";

    for (x in links){
        $("#" + x).css("border","1px solid #000");
        $("#" + x).click(function(){
            alert(x);
        });
    }
});
</script>
<div id="a">a</div><br />
<div id="b">b</div><br />
<div id="c">c</div><br />

Div#A를 클릭하면 DIV#B 등의 "링크 A"Alert, Link B "등을 얻게됩니다 ... 문제는이 코드를 실행하면 각 요소를 클릭하면 ALERT를 제공한다는 것입니다 ( "Link C") 결과적으로, 마지막 함수 변동 만 각 DIV에 할당 된 것 같습니다 ...

물론 DIV의 ID로 작동하도록 기능을 편집하고 $ (this)를 사용하여 해킹 할 수 있지만,이주기가 작동하는 방법이 있습니까? 기능의 각 요소에 새 기능을 작성하고 할당함으로써?

미리 thx ...

도움이 되었습니까?

해결책

클로저 사용 : ( "이"솔루션은 더 우아하지만, 현재 삭제 된 답변에 작동하지 않는 클로저 솔루션이 있었기 때문에이 글을 게시하고 있습니다.

$(document).ready(function(){
    links = {};
    links.a = "Link a";
    links.b = "Link b";
    links.c = "Link c";

    for (var x in links){
        $("#" + x).css("border","1px solid #000");
        $("#" + x).click(
            function(xx){ 
                return function() { alert(xx) };
            }(x)
        );
    };
});

다른 팁

jQuery의 좋은 점은 CSS와 같은 여러 요소를 체인하고 바인딩 할 수 있다는 것입니다.

$(document).ready(function(){

    $('#a,#b,#c')
        .css("border","1px solid #000")
        .bind('click',function(){
            // do something
         });

});

나는 이것이 당신이 뒤 따르는 것이라고 믿는다 :

$(document).ready(function(){
   links = {
      a:"Link a",
      b:"Link b",
      c:"Link c",
    };

    $.each(links, function(id,text){
      $("#"+id)
       .css("border","1px solid #000")
       .click(function(){ alert(text) })
    })
});

작동하는 데모 http://jsfiddle.net/fwchv/

귀하는 코드에서 jQuery 생성자를 여러 번 호출하고 있습니다. $('#a') ~보다 $('#b') 그리고 $('#c') 대신 당신은처럼 전화해야합니다 $('#a,#b,#c')

내 코드에서 나는 $ .Each를 사용하여 모든 ID를 통과하고 결합했고 다음 단계에서 내가 사용한 단계에서 $('#a,#b,#c') 변수에 저장됩니다 x 코드를 최적화하고 쉽게 만듭니다.

나는 또한 그것을 확인했다 links{} 비어 있으면 변수를 사용하여 처리하지 않습니다 i

$(document).ready(function () {
    links = {};
    links.a = "Link a";
    links.b = "Link b";
    links.c = "Link c";
    i = 0;
    x = '';
    $.each(links, function (id) {
        x += "#" + id + ',';
        i++;
    });
    if (i > 0) {
        $($(x.slice(0, -1))).css("border", "1px solid #000").click(function () {
            alert($(this).text());
        });
    }
});

<script type="text/javascript">
$(document).ready(function(){
    $('.links').css("border","1px solid #000");
    $('.links').live('click', function() {
        alert("Link " + $(this).attr('id'));
    });
});
</script>
</head>
<body>
<div id="a" class="links">a</div><br />
<div id="b" class="links">b</div><br />
<div id="c" class="links">c</div><br />

"this"를 사용해야합니다.

$(document).ready(function(){
    links = {};
    links.a = "Link a";
    links.b = "Link b";
    links.c = "Link c";

    for (var x in links){
        $("#" + x).css("border","1px solid #000");
        $("#" + x).click(function(){
                alert("Link "+this.id+" Alert!");
        });
    }
});

<script type="text/javascript">
$(document).ready(function(){
    links = {};
    links.a = "Link a";
    links.b = "Link b";
    links.c = "Link c";

    for (x in links){
        $("#" + x).css("border","1px solid #000").click(function(){
                alert($(this).attr('id'));
        });
    }
});
</script>

</head>

<body>

<div id="a">a</div><br />
<div id="b">b</div><br />
<div id="c">c</div><br />

어쨌든 당신이 어쨌든 영향을 받기 위해 요소를 하드 코딩하는 것처럼, 당신은 더 빠를 가능성이 높고 더 깨끗하고 IMO : IMO : 이런 식으로 그렇게 할 수 있습니다.

$("#a,#b,#c").css("border","1px solid #000");
$("#a,#b,#c").click(function(){
    alert("Link "+this.id+" Alert!");
});

편집하다: 나는 당신의 질문의 마지막 부분을 보지 못했습니다 ... 죄송합니다. 당신은 또한 이것을 할 수 있습니다 : 

var links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";

var ids = '';
$.each(function(key,val) {
    ids += "#"+key+","; // extra commas are ignored in jQuery
});

$(ids)
    .css("border","1px solid #000")
    .bind('click',function(){
        alert("Link "+this.id+" Alert!");
    });

사용해보십시오 :

$(window).load(function(){

});

:)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top