Question

我编写了一个div部分，其中包含一个按钮（选择设备）。可以有许多相同的div包含相同的按钮。我想确定单击了哪个按钮，并将状态从打开更改为完成该特定div部分。

HTML

<div class="pad col-xs-12 col-sm-12 col-md-12 pern alert"> 
    <div class="pad col-xs-12 col-md-6">
        <h4 id="frname"></h4>
    </div>
    <div class="pad col-md-5">
        <span class="next-step"><button class="ret_but butt label label-primary" id="equipment" name="equipment" type="button" OnClick='change();'>Select Equipment</button></span>
        <div class="status">
            <b>Status</b>
            <i class="open" id="open">Open</i>
        </div>
    </div>
    <div class="pad col-md-1">
        <button aria-hidden="true" data-dismiss="alert" class="closee" id="garbage" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i> </button>
    </div>
</div>

的JavaScript

<script>
function change() {
    var $active = $('.wizard .nav-tabs li.active');
    $active.next().removeClass('disabled');
    nextTab($active);
    $("div.pen").find('.open').attr("class","complete");
    $("i.complete").html("Complete");
}
</script>

Answer 1

试试这个代码段。

$('.select-eq').click(function(){
  
 $(this).parent('span').next('div.status').children('i').html("completed");
  $(this).attr('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="pad col-xs-12 col-sm-12 col-md-12 pern alert"> 
        <div class="pad col-xs-12 col-md-6">
                <h4 id="frname"></h4>
        </div>
        <div class="pad col-md-5">
                <span class="next-step"><button class="ret_but butt label label-primary select-eq" id="equipment" name="equipment" type="button">Select Equipment</button></span>
                <div class="status">
                            <b>Status</b>
                            <i class="open" id="open">Open</i>

                </div>
        </div>
        <div class="pad col-md-1">

            <button aria-hidden="true" data-dismiss="alert" class="closee" id="garbage" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i> </button>
    </div>
</div>
<div class="pad col-xs-12 col-sm-12 col-md-12 pern alert"> 
        <div class="pad col-xs-12 col-md-6">
                <h4 id="frname"></h4>
        </div>
        <div class="pad col-md-5">
                <span class="next-step"><button class="ret_but butt label label-primary select-eq" id="equipment" name="equipment" type="button">Select Equipment</button></span>
                <div class="status">
                            <b>Status</b>
                            <i class="open" id="open">Open</i>

                </div>
        </div>
        <div class="pad col-md-1">

            <button aria-hidden="true" data-dismiss="alert" class="closee" id="garbage" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i> </button>
    </div>
</div>

Answer 2

    <div class="pad col-md-5">
                    <span class="next-step"><button class="ret_but butt label label-primary" name="equipment" type="button">Select Equipment</button></span>
                    <div class="status">
                                <b>Status</b>
                                <i class="open">Open</i>

                    </div>
            </div>
<div class="pad col-md-5">
                    <span class="next-step"><button class="ret_but butt label label-primary" name="equipment" type="button">Select Equipment</button></span>
                    <div class="status">
                                <b>Status</b>
                                <i class="open">Open</i>

                    </div>
            </div><div class="pad col-md-5">
                    <span class="next-step"><button class="ret_but butt label label-primary" name="equipment" type="button">Select Equipment</button></span>
                    <div class="status">
                                <b>Status</b>
                                <i class="open">Open</i>

                    </div>
            </div>

    $('[name=equipment]').on('click', function(){
      $(this).parents().siblings('div.status').find('i').html('Complete');
    });

https://jsfiddle.net/uh9s5Lj0/

Answer 3

看下面的代码希望它可以提供帮助。在这里我放了多个div，每个div都有按钮。我抓住了按钮点击并对该按钮执行了操作。

＆＃13;

function change(button) {
  //do your stuff here
  console.log(button.data("id"));
  button.parent().parent().find('i').text(' complete '+ button.data("id"));
  
  /*var $active = $('.wizard .nav-tabs li.active');
  $active.next().removeClass('disabled');
  nextTab($active);
  $("div.pen").find('.open').attr("class", "complete");
  $("i.complete").html("Complete");*/
}
$('button.ret_but').on('click',function(){
  change($(this));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pad col-xs-12 col-sm-12 col-md-12 pern alert">
  <div class="pad col-xs-12 col-md-6">
    <h4 id="frname"></h4>
  </div>
  <div class="pad col-md-5">
    <span class="next-step"><button class="ret_but butt label label-primary" id="equipment"                 name="equipment" type="button" data-id="1">Select Equipment</button></span>
    <div class="status"> <b>Status</b><i class="open" id="open">Open</i>
    </div>
  </div>
   <div class="pad col-md-5">
    <span class="next-step"><button class="ret_but butt label label-primary" id="equipment"                 name="equipment" type="button" data-id="2">Select Equipment</button></span>
    <div class="status"> <b>Status</b><i class="open" id="open">Open</i>
    </div>
  </div>
   <div class="pad col-md-5">
    <span class="next-step"><button class="ret_but butt label label-primary" id="equipment"                 name="equipment" type="button" data-id="3">Select Equipment</button></span>
    <div class="status"> <b>Status</b><i class="open" id="open">Open</i>
    </div>
  </div>
  <div class="pad col-md-1">

    <button aria-hidden="true" data-dismiss="alert" class="closee" id="garbage" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i> 
    </button>
  </div>
</div>

＆＃13;

Answer 4

您可以通过检索单击按钮的父元素来识别单击的部分。请参阅工作解决方案https://jsfiddle.net/mp4o5z3u/

片段

- (BOOL)textView:(UITextView *)textView
shouldChangeTextInRange:(NSRange)range
 replacementText:(NSString *)text{

    if([text isEqualToString:@""]){//means user pressed backspace
        NSArray *arrayOfWords = [textView.text componentsSeparatedByString:@" "];// Separate all the words separated by space
        NSString *lastWord = [arrayOfWords lastObject];// Get the last word (as we are working with backspace)

        if([lastWord hasPrefix:@"@"]){
            textView.text = [textView.text stringByReplacingOccurrencesOfString:lastWord withString:@" "];//if last word starts with @, then replace it with space
        }
    }

    return YES;
}

使用Javascript：

<body>
  <div class="test">
    <button class='btn'>click me</button>
    <i class="open">Open</i>
  </div>

  <div class="test">
    <button class='btn'>click me</button>
    <i class="open">Open</i>
  </div>
</body>

如何识别在哪个div里面点击了哪个按钮？

4 个答案: