Question

这是GSP代码，我在其中调用Java Script函数。

<div class="approval-container row">    
    <div class="col-xs-6 col-md-5">
        <div class="btn-group" role="group">
            <button type="button" class="btn byop-yes-button" onclick="test1($(this))">Yes</button>
            <button type="button" class="btn byop-no-button" onclick="test2($(this))">No</button>
        </div>
    </div>

    <div class="approval-email-container row">
        <div class="col-xs-6 col-md-5">
            <div class="btn-group" role="group">
                <button type="button" name="button1" disabled="true" class="btn email-yes-button1" onclick="test3($(this))">ABC</button>
            </div>
        </div>
    </div>
</div>

这是jQuery代码逻辑：

function test1(button) {

        $(button).closest('.approval-container').find('.approval-email-container button[name="button1"]').addClass('btn-default');

}

搜索了类似的帖子，但它不适合我。非常感谢您的帮助。

Answer 1

使用onclick="test1($(this))"时，您已经发送了一个对象。你可以试试这个：

＆＃13;

function test1(button) {
        button.addClass('btn-default');
        button.closest('.approval-container').find('.email-yes-button'+(button.index()+1)).addClass('btn-default')
    }

＆＃13;

.btn-default{
    width:500px;
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="approval-container row">    
    <div class="col-xs-6 col-md-5">
        <div class="btn-group" role="group">
            <button type="button" class="btn byop-yes-button" onclick="test1($(this))">Yes</button>
            <button type="button" class="btn byop-no-button" onclick="test2($(this))">No</button>
        </div>
    </div>

    <div class="approval-email-container row">
        <div class="col-xs-6 col-md-5">
            <div class="btn-group" role="group">
                <button type="button" name="button1" disabled="true" class="btn email-yes-button1" onclick="test3($(this))">ABC</button>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

答案很简单：HTML中没有名称为input的 button1 。您有一个 button ：

<button type="button" id="button1" name="button1" disabled="true" class="btn email-yes-button1" onclick="test3($(this))">ABC</button>

更改此代码

$(button)
    .closest('.approval-container')
    .find('.approval-email-container input[name="button1"]')
    .addClass('btn-default');

到

$(button)
    .closest('.approval-container')
    .find('.approval-email-container button[name="button1"]')
    .addClass('btn-default');

顺便说一句，这个button有id，保证是唯一的（必须），您可以轻松地用以下代码替换代码：

$('#button1').addClass('btn-default');

Answer 3

如果Id不适合您，请尝试使用Class和Try this方式。

  <div class="col-xs-6 col-md-5">
                <div class="btn-group" role="group">
                    <button type="button" class="btn byop-yes-button">Yes</button>
                    <button type="button" class="btn byop-no-button" onclick="test2($(this))">No</button>
                </div>
            </div>
        </div>
        <div class="approval-email-container row">
            <div class="col-xs-6 col-md-5">
                <div class="btn-group" role="group">
                    <button type="button" id="button1" name="button1" disabled="true" class="btn email-yes-button1" onclick="test3($(this))">ABC</button>
                </div>                
            </div>
        </div>

    <script>
    $('.byop-yes-button').on('click',function() { 
       //if you are worried about current element 
       //you can use $(this) here instead  of parameter in a function.
       //which is a usual good practice to work with jquery.
     $('.approval-email-container').find('button[name="button1"]').addClass('btn-default');
       })
  </script>

Answer 4

Check the selector attribute documentation attribute_selectors

I think that the following code can help you, but try to describe better what you need.

Javascript:

// if realy needs to be the clossest approval-container. All buttons inside
function test11(button) {
    button.closest('.approval-container').find('.approval-email-container button[name*="button"]').addClass('btn-default');
}
function test22(button) {
    button.closest('.approval-container').find('.approval-email-container button[name*="button"]').removeClass('btn-default');
}

//if it will be just one approval-container. All buttons inside
function test1(button) {
    $('.approval-email-container button[name*="button"]').addClass('btn-default');
}
function test2(button) {
    $('.approval-email-container button[name*="button"]').removeClass('btn-default');
}

//Toggle option. All buttons inside
function test(button){
    var elem = $('.approval-email-container button[name*="button"]');
    if(elem.hasClass('btn-default')) elem.removeClass('btn-default');
    else elem.addClass('btn-default');
}

Html:

<div class="approval-container row">    
<div class="col-xs-6 col-md-5">
    <div class="btn-group" role="group">
        <button type="button" class="btn byop-yes-button" onclick="test1($(this));">Yes</button>
        <button type="button" class="btn byop-no-button" onclick="test2($(this))">No</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn byop-yes-button" onclick="test11($(this));">Yes</button>
        <button type="button" class="btn byop-no-button" onclick="test22($(this))">No</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn byop-yes-button" onclick="test($(this));">Yes</button>
        <button type="button" class="btn byop-no-button" onclick="test($(this))">No</button>
    </div>
</div>

<div class="approval-email-container row">
    <div class="col-xs-6 col-md-5">
        <div class="btn-group" role="group">
            <button type="button" name="button1" disabled="true" class="btn email-yes-button1" onclick="test3($(this))">ABC</button>
        </div>
         <button type="button" name="button2" disabled="true" class="btn email-yes-button1" onclick="test3($(this))">ABC</button>
        </div>
     <button type="button" name="button3" disabled="true" class="btn email-yes-button1" onclick="test3($(this))">ABC</button>
        </div>
    </div>
</div>

使用jQuery在div中选择一个按钮

4 个答案: