获取点击按钮的名称答案

【问题标题】：Getting the name of clicked button获取点击按钮的名称
【发布时间】：2015-07-15 07:52:19
【问题描述】：

在我的网页中，有几个动态创建的 href 按钮。

例如，将创建四个 href 按钮，用户可能点击了两个 href 按钮。

1) 每当单击href按钮时，href按钮的文本将从“select”变为“selected”。

2) 一旦用户完成了两个 href 按钮的点击，用户将点击“NEXT”按钮。

当用户单击 NEXT 按钮时，我试图获取显示文本“已选择”的那些 href 按钮的名称。我怎样才能完成它？

创建href按钮的代码：

<?php
     while($rowModelList=mysql_fetch_array($resultModelList))
     {
?>
    <div class="col-md-3 col-sm-6 hero-feature">
    <div class="thumbnail">
         <img src="Images/Models/<? echo $rowModelList['modelImage'];?>" alt="" style="height: 200px;">
         <div class="caption">
              <h4><?php echo $rowModelList['modelName']?></h4>
              <p>
              <a href="#" id="<?php echo $rowModelList['Id']?>" onClick="return changecolor(this)" class="btn btn-primary">Select</a>
              </p>
    </div>
    </div>
    </div>
<?php
  }
?>

创建NEXT按钮的代码：

<div class="row text-right">
     <a href="#" id="nextbtn" class="btn btn-primary">Next</a>
</div>

点击后将 href 按钮文本从“选择”更改为“已选择”的代码：

<script type="text/javascript">
        /* Changing the colour of the button upon clicked */
        function changecolor(element) {

            if(element.innerHTML == "Select") {
                        element.innerHTML = "Selected";
                        element.style.backgroundColor = "#C0C0C0"; /* Grey became seleted */
                        element.style.borderColor = "#C0C0C0";

                  }

            else {
                element.innerHTML = "Select";
                element.style.backgroundColor = "#FED136"; /* Yellow not selected */
                element.style.borderColor = "#FED136";            }
            return false;
        }
     </script>

【问题讨论】：

你能在小提琴上展示它吗？

标签： javascript php html

【解决方案1】：

您可以找到所有带有文本选择的锚标记：

$('#nextbtn').click(function(){

   var searchText = "Selected";
   var searchEles = document.getElementById("caption").children;
   for(var i = 0; i < searchEles.length; i++) {
     if (searchEles[i].textContent == searchText) {
     console.log(searchEles[i]);   
   }
  }


});

【讨论】：

【解决方案2】：

请检查以下代码。我认为它可以根据您的需要正常工作。

$('#mybutton').on('click',function(){
    var i=0;
    $("a").each(function(){
        if($(this).html()=="selected")
        {
            // do what you want
            i++;
        }
    });
    alert(i);
})

在上面的代码中，我使用了“i”变量，我仅用于计算包含选定文本的锚点数量，您可以将其删除并根据需要操作代码。请检查一次。

我还创建了小示例，请查看以下链接。

Example Demo

【讨论】：

【解决方案3】：

在将文本从“选择”更改为“已选择”时，向所选按钮添加一个类（并将其从另一个按钮中删除）以便以后更轻松地找到它。像这样的：

    <div class="caption">
        <a href="#" id="first" onClick="changecolor(this)" class="select-btn btn btn-primary">Select</a>
        <a href="#" id="second" onClick="changecolor(this)" class="select-btn btn btn-primary">Select</a>
    </div>

    <div class="row text-right">
        <a href="#" id="nextbtn" onClick="next()" class="btn btn-primary">Next</a>
    </div>


    <script>
        function changecolor(element) {
            var buttons = document.getElementsByClassName("select-btn");
            for(var i = 0; i < buttons.length; i++){
                buttons[i].classList.remove('selected-btn');
                buttons[i].innerHTML = "Select";
            }

            if(!element.classList.contains('selected-btn') ){
                element.innerHTML = "Selected";
                element.classList.add('selected-btn');
            }
        }

        function next(){
            alert( document.getElementsByClassName("selected-btn")[0].getAttribute('id') );
        }
    </script>

【讨论】：

【解决方案4】：

如果你使用 jQuery，你可以试试

var hrefButton = "";
jQuery('#nextbtn').on('click',function(){       
    hrefButton = jQuery('#nextbtn').attr('href');
    console.log(hrefButton);    
});

【讨论】：

【解决方案5】：

这是给你的一个例子。它是 jquery。

<a href = "#" id="linkHere">Select</a>


$('.linkHere').click(function(){

  $(this).text("Selected");

});

【讨论】：