1

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

单击每个<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

谢谢

4

7 回答 7

3

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

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

示例小提琴

于 2013-11-08T09:58:07.717 回答
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,输出

于 2013-11-08T09:57:53.570 回答
1

这段代码

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

意思是：当我点击元素时，在页面 layout1 上a.sldcont1给出 ALL值。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")孩子 layout1 值。

于 2013-11-08T09:57:42.027 回答
1

“每个”都没有用

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"); });




});
于 2013-11-08T09:57:58.057 回答
1

尝试

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");
    });
});

演示：小提琴

或者

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");
    });
});

演示：小提琴

于 2013-11-08T09:58:07.720 回答
1

$.each不喜欢就试一试，

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

演示

于 2013-11-08T09:58:45.547 回答
0

尝试这个：

$('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"); 
});
于 2013-11-08T10:04:45.313 回答