Question

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

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

1）每当点击一个href按钮时，href按钮的文本将从“select”变为“selected”。

2）用户完成点击两个href按钮后，用户将点击“下一步”按钮。

当用户点击thr NEXT按钮时，我试图获取显示文本“Selected”的那些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按钮文本从“select”更改为“selected”的代码：

<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>

Answer 1

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

    <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>

Answer 2

如果你正在使用jQuery

，你可以试试

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

Answer 3

您可以找到所有锚标签，其文本选择为：

$('#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]);   
   }
  }


});

Answer 4

这里有一个例子给你..它的jquery。

C:\XXXXX\XXX\XXXX\libs\armeabi

no PC700 in java.library.path

Helloooo

获取单击按钮的名称

4 个答案: