وظيفة الربط لعناصر متعددة باستخدام 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، ستحصل على تنبيه "Link a" و"Link b" على div#b وما إلى ذلك...المشكلة هي أنه إذا قمت بتشغيل هذا الرمز، فإن النقر على كل عنصر سيعطي تنبيه ("Link c") نتيجة لذلك، ويبدو أنه تم تعيين الاختلاف الأخير فقط للوظيفة لكل قسم ...

بالطبع يمكنني اختراقها عن طريق تحرير الوظيفة للعمل مع معرف div واستخدام $(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(xx){ 
                return function() { alert(xx) };
            }(x)
        );
    };
});

نصائح أخرى

والشيء الجميل مسج هو أنه يسمح تسلسل وملزمة عناصر متعددة تماما مثل المغلق. 

$(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/

وفي أن رمز الذي تتصل مسج منشئ عدة مرات $('#a') أي بمعنى من $('#b') و$('#c') بدلا يجب الاتصال مثل $('#a,#b,#c')

في قانون بلدي لقد مرت كل عام معرف باستخدام $. كل وضمها وفي الخطوة التالية ولقد استخدمت $('#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 />

وتحتاج إلى استخدام "هذا". 

$(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:

$("#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