Question

我正在努力实现这一目标：

单击每个<a>按钮，将每个元素传递的.text复制到文本字段。代码可以工作，但是当存在多个相同的代码块时。它不能很好地工作。点击每个按钮后，按钮的.text值将传递给所有文本字段而不是其兄弟字段。

这是我的HTML：

<ul>
    <li class="ast_trigger">
        <a class="sldcont1 astbtn">layout1</a>
        <a class="sldcont2 astbtn">layout2</a>
        <a class="sldcont3 astbtn ast_active">layout3</a>
        <input type="text" id="slides-slide_content_0" name="asteria[slides][0][slide_content_id]" value="layout3" class="full-text ast_content">
    </li>

    <li class="ast_trigger">
        <a class="sldcont1 astbtn">layout1</a>
        <a class="sldcont2 astbtn">layout2</a>
        <a class="sldcont3 astbtn ast_active">layout3</a>
        <input type="text" id="slides-slide_content_1" name="asteria[slides][1][slide_content_id]" value="layout3" class="full-text ast_content">
    </li>

    <li class="ast_trigger">
        <a class="sldcont1 astbtn">layout1</a>
        <a class="sldcont2 astbtn">layout2</a>
        <a class="sldcont3 astbtn ast_active">layout3</a>
        <input type="text" id="slides-slide_content_2" name="asteria[slides][2][slide_content_id]" value="layout3" class="full-text ast_content">
    </li>
</ul>

这是JS：

jQuery(window).ready(function() {
    jQuery(".ast_trigger").each(function(){ 
        jQuery(this).find('a.sldcont1').click(function(){         
            jQuery(".ast_content").val("layout1"); 
        });

        jQuery(this).find('a.sldcont2').click(function(){
            jQuery(".ast_content").val("layout2");
        });

        jQuery(this).find('a.sldcont3').click(function(){
            jQuery(".ast_content").val("layout3");
        });
    });
});

这是现场jsbin示例：http://jsbin.com/IhajaX/1/edit

由于

Answer 1

您不需要each循环。每个元素上都有一个分组类，因此您可以使用DOM遍历来获取相对于单击的input元素的a并填充其value。

$('.astbtn').click(function() {
    $('.ast_content', $(this).closest('li')).val($(this).text());
});

Example fiddle

Answer 2

问题不是each()调用，而是事件处理函数。目前在处理程序中，您全局搜索要添加文本的目标。您应该在相应的<li>元素内搜索，如下所示：

jQuery(".ast_trigger").each( function(){ 

  jQuery(this).find('a.sldcont1').click(function(){ 
     jQuery( this ).parent( '.ast_trigger' )
                   .find(".ast_content")
                   .val("layout1"); 
  });

  jQuery(this).find('a.sldcont2').click(function(){ 
     jQuery( this ).parent( '.ast_trigger' )
                   .find(".ast_content")
                   .val("layout2"); 
  });

  jQuery(this).find('a.sldcont3').click(function(){ 
     jQuery( this ).parent( '.ast_trigger' )
                   .find(".ast_content")
                   .val("layout3"); 
  });


});

http://jsbin.com/IhajaX/5/edit?html,js,output

Answer 3

此代码

jQuery(this).find('a.sldcont1').click(function(){ jQuery(".ast_content").val("layout1"); });

表示：当我点击a.sldcont1元素时，请在页面layout1值上提供所有jQuery(".ast_content")。

我想你想做的是

jQuery(this).find('a.sldcont1').click(function(){ jQuery(this).parent().find(".ast_content").val("layout1"); });

这意味着：当我点击a.sldcont1元素时，请将我的父母（<li class="ast_trigger">此处）jQuery(".ast_content")子格式设为1布局值。

Answer 4

“每个”只是做

是没有用的

jQuery(window).ready(function() {



jQuery('a.sldcont1').click(function(){ jQuery("#slides-slide_content_0").val("layout1"); });

jQuery('a.sldcont2').click(function(){ jQuery("#slides-slide_content_1").val("layout2"); });

jQuery('a.sldcont3').click(function(){ jQuery("#slides-slide_content_2").val("layout3"); });




});

Answer 5

尝试

jQuery(window).ready(function () {
    jQuery(".ast_trigger .sldcont1").click(function(){
        $(this).closest('li').find(".ast_content").val("layout1");
    });
    jQuery(".ast_trigger .sldcont2").click(function(){
        $(this).closest('li').find(".ast_content").val("layout2");
    });
    jQuery(".ast_trigger .sldcont3").click(function(){
        $(this).closest('li').find(".ast_content").val("layout3");
    });
});

演示：Fiddle

或者

jQuery(window).ready(function () {
    jQuery(".ast_trigger .sldcont1").click(function(){
        $(this).siblings(".ast_content").val("layout1");
    });
    jQuery(".ast_trigger .sldcont2").click(function(){
        $(this).siblings(".ast_content").val("layout2");
    });
    jQuery(".ast_trigger .sldcont3").click(function(){
        $(this).siblings(".ast_content").val("layout3");
    });
});

演示：Fiddle

Answer 6

尝试不使用$.each之类的

$('a.astbtn').click(function(){ 
    $(this).closest(".ast_trigger").find('input').val($(this).text());
});

Demo

Answer 7

试试这个：

$('a.sldcont1').click(function(){  
    $(this).parent().find(".ast_content").val("layout1"); 
});
$('a.sldcont2').click(function(){  
    $(this).parent().find(".ast_content").val("layout2"); 
});
$('a.sldcont3').click(function(){  
    $(this).parent().find(".ast_content").val("layout3"); 
});

无法让Jquery .each函数正常工作

7 个答案: