Question

我希望获得dropdown-menu的选定值并将其应用于span的{{1}}

dropdown_text

我试过这个没有成功：

<div class='dropdown'>
    <button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0px 4px 4px 0px; type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>
        <span class='dropdown_text'>Choose a option</span>
        <span class='caret'></span>
    </button>
    <ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>
        <li><a href='#'>Yes</a></li>
        <li><a href='#'>No</a></li>
        <li><a href='#'></a></li>
    </ul>
</div>

带箭头的那个工作，但因为我有动态创建的$('.dropdown-menu li > a').click(function(event){ var otherInput = $(this).closest('button').find('span'); console.log(otherInput); //$('.dropdown_text').text(this.innerHTML); <<<<---- });的多个实例，我需要将值不应用于所有这些实例，而只应用于“当前”实例。

所以我想。从我的<div class='dropdown'>，我遍历到a按钮，closest来自find类的元素。

但我似乎在某处做错了。

Answer 1

您的button不是li > a的祖先 - 因此closest()将无效 - 而是使用{{1}查找dropdown然后下降找到closest()。

见下面的代码：

button span

见下面的演示：

＆＃13;

$('.dropdown-menu li > a').click(function(event){
    $(this).closest('.dropdown').find('button span.dropdown_text').text(this.innerHTML);
});

＆＃13;

$('.dropdown-menu li > a').click(function(event){
    $(this).closest('.dropdown').find('button span.dropdown_text').text(this.innerHTML);
});

＆＃13;

Answer 2

我的建议是：

通过课程下拉菜单获取第一个父级div：最近（＆＃39; div.dropdown＆＃39;）
使用class dropdown_text查找范围：find（＆＃39; span.dropdown_text＆＃39;）

摘录：

＆＃13;

$('.dropdown-menu li > a').on('click', function(event){
  var otherInput = $(this).closest('div.dropdown').find('span.dropdown_text');
  console.log(otherInput.text());
  otherInput.text(this.textContent);
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class='dropdown'>
    <button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0px 4px 4px 0px;' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>
    <span class='dropdown_text'>Choose a option</span>
    <span class='caret'></span>
    </button>
    <ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>
        <li><a href='#'>Yes</a></li>
        <li><a href='#'>No</a></li>
        <li><a href='#'></a></li>
    </ul>
</div>

＆＃13;

Answer 3

用以下代码替换你的jQuery代码：

w_share

Answer 4

$ ._most（）遍历DOM树。它与兄弟姐妹不匹配。在你的点击中，它会去，li - ＆gt; ul.dropdown-menu - ＆gt; div.dropdown - ＆gt;什么是它的父母。

它永远找不到按钮。

function mapMany(processors, channels) {
    return processors.reduce((channels, processor) =>
        channels.map(channel => channel.map(processor))
    , channels);
}

将返回两个跨度

遍历 - 向上走到最近并向下找

4 个答案: