Question

嘿所有我想要获取上一个按钮，以便一旦有人从选择框中选择一个值，我就可以将其文本更改为其他内容。

<div class="input-group">
    <div class="input-group-btn search-panel">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span id="search_concept">Type</span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="dd1" role="menu">
             <li><a href="#" data-info="blah1">For Sale</a></li>
             <li><a href="#" data-info="blah1">Wanted</a></li>
        </ul>
    </div>
    <div class="input-group-btn search-panel">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span id="search_concept">Location</span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="dd2" role="menu">
             <li><a href="#" data-info="somewhere">Somewhere</a></li>
             <li><a href="#" data-info="elsewhere">Elsewhere</a></li>
        </ul>
    </div>
    <input type="text" class="form-control" name="x" placeholder="Search term...">
</div>

$('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) {
    e.preventDefault();
    var param = $(this).data("info");

    $(this).prev().find('#search_concept').text($(this).text());
});

因此点击事件从 THIS 开始，这是 a href =“＃”data-info =“blah1”＆gt; [value here]＆lt; / a＆gt; 标记。所以我想回到＆lt;按钮＆gt; 标记，以便我可以将文本类型更改为所选内容。

我试过了：

$(this).prev().find('#search_concept').text($(this).text());
and
$(this).prev().prev().find('#search_concept').text($(this).text());
and
$(this).prev().prev().children().find('#search_concept').text($(this).text());
and
$(this).prev().children().find('#search_concept').text($(this).text());

我似乎无法找到它......

固定

$('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) {
    e.preventDefault();
    var param = $(this).data("info");

    $(this).parents('.search-panel').find('button').html($(this).text() + ' <span class="caret"></span>');
});

Answer 1

以下代码段使用jQuery的$(this).parents(selector)来定位按钮。

.find(selector)将找到具有指定选择器的任何父元素。

然后$('.search-panel #dd1').find('a').click(function(e) { e.preventDefault(); var param = $(this).data("info"); var text = $(this).text(); // Assign element to variable for later manipulation var $button = $(this).parents('.search-panel').find('button'); // eg: Replace button text (replaces all content including html) // $button.text(text) // eg: Find another element inside $button and replace the text // $button.find('#search_concept').text(text) });将搜索指定选择器的父元素。

然后您可以将其分配给变量并使用该元素。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
    <div class="input-group-btn search-panel">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span id="search_concept">Type</span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="dd1" role="menu">
             <li><a href="#" data-info="blah1">For Sale</a></li>
             <li><a href="#" data-info="blah1">Wanted</a></li>
        </ul>
    </div>
    <input type="text" class="form-control" name="x" placeholder="Search term...">
</div>

CREATE OR REPLACE PROCEDURE log_sal (
  emp_id NUMBER, old_sal NUMBER, new_sal NUMBER)
AS LANGUAGE JAVA
NAME 'DBTrigger.logSal(int, float, float)';

Answer 2

您根本无法拥有多个SAME ID。

$(this).parents().find("button #search_concept").text($(this).text());

Answer 3

你有重复的ID，可能会让事情变得混乱。我会将id的中继概念改为其他一些选择器，例如类：

所以这样你可以将search-panel组视为一个小部件，javascript将被重写为：

＆＃13;

$('.search-panel').each(function() {
  var search_concept = $(this).find(".search_concept");
  $(this).find('a').click(function(e) {
    e.preventDefault();
    var param = $(this).data("info");
    search_concept.text($(this).text());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="input-group">
        <div class="input-group-btn search-panel">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="search_concept">Type</span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" class="dd" role="menu">
                 <li><a href="#" data-info="blah1">For Sale</a></li>
                 <li><a href="#" data-info="blah1">Wanted</a></li>
            </ul>
        </div>
        <div class="input-group-btn search-panel">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="search_concept">Location</span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" class="dd" role="menu">
                 <li><a href="#" data-info="somewhere">Somewhere</a></li>
                 <li><a href="#" data-info="elsewhere">Elsewhere</a></li>
            </ul>
        </div>
        <input type="text" class="form-control" name="x" placeholder="Search term...">
    </div>

＆＃13;

这种方法可以提高可移植性。

jQuery按ID查找上一个按钮（具有不同的名称）

3 个答案: