Question

我非常模糊如何更改我的动态按钮属性，我尝试了很多方法，但不是我想要的。

让我先看看我的代码： -

            <ul>
                        <li>
                            <input type="button" name="trip[]" value="PB" class="field" onclick="changeBtnText(id);return false">
                        </li>
                        <li>
                            <input type="text" name="platno[]" class="field">
                        </li>
                        <li>
                            <input type="text" name="amount[]" class="field">
                        </li>
                    </ul>

{{1}}

我的目标是每次点击按钮id =“trip []”我希望此按钮内的值会从 - 变为： -

如果为空值而不是更改为值=“PB”
如果value =“PB”而不是更改为value =“P”
如果value =“P”而不是更改为value =“B”
if value =“B”而不是再次变为空值

我已经很多天但是无法配置它并希望这个论坛上的任何人已经面临同样的问题，请帮助我。

感谢提前阅读此问题并回答我的问题。

谢谢你。

Answer 1

将此作为函数参数传递给html函数

<ul>
                        <li>


                       <input type="button" name="trip[]" value="PB" class="field" onclick="changeBtnText(this)">
                    </li>
                    <li>
                        <input type="text" name="platno[]" class="field">
                    </li>
                    <li>
                        <input type="text" name="amount[]" class="field">
                    </li>
                </ul>

将此js写入您的函数

function changeBtnText(ele){
        if($(ele).attr('value')== "PB"){
            $(ele).attr('value',"P")
        }else if($(ele).attr('value')== "P"){
            $(ele).attr('value',"B")
        }else if($(ele).attr('value')== "B"){
            $(ele).attr('value',"")
        }else{
            $(ele).attr('value',"PB")
        }
    }

正如您在html中使用id define id属性尝试实现的那样，然后使用此代码

<强> HTML

<ul>
       <li>
             <input type="button" name="trip[]" value="PB" id="trip" class="field" onclick="changeBtnText(id)">
        </li>
         <li>
             <input type="text" name="platno[]" class="field">
         </li>
          <li>
         <input type="text" name="amount[]" class="field">
         </li>
 </ul>

<强> JS

function changeBtnText(id){
        if($('#'+id).attr('value')== "PB"){
            $('#'+id).attr('value',"P")
        }else if($('#'+id).attr('value')== "P"){
            $('#'+id).attr('value',"B")
        }else if($('#'+id).attr('value')== "B"){
            $('#'+id).attr('value',"")
        }else{
            $('#'+id).attr('value',"PB")
        }
    }

Answer 2

试试这个：

$(document).ready(function(){

    $("input[type=button]").on("click",function(){

        var value = $(this).val();

        if (value == "")
            $(this).val("PB");

        else if (value == "PB")
            $(this).val("P");

        else if (value == "P")
            $(this).val("B");

        else
            $(this).val("");

    })
})

最终代码：

＆＃13;

<html>
    <title>This is test</title>
    <head>
    </head>
    <body>
        
         <ul>
                        <li>
                            <input type="button" name="trip[]" value="PB" class="field">
                        </li>
                        <li>
                            <input type="text" name="platno[]" class="field">
                        </li>
                        <li>
                            <input type="text" name="amount[]" class="field">
                        </li>
                    </ul>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
        $(document).ready(function(){

            $("input[type=button]").on("click",function(){

                var value = $(this).val();

                if (value == "")
                    $(this).val("PB");

                else if (value == "PB")
                    $(this).val("P");

                else if (value == "P")
                    $(this).val("B");

                else
                    $(this).val("");

            })
        })

        </script>
    </body>
</html>

＆＃13;

Answer 3

您的代码似乎没有引用单击的元素。您可以通过jQuery事件处理程序中的this变量或event.target来访问它。使用if / else if序列也优于顺序if语句中的提前终止。

此外，您要确保if语句的第一个块检查等于是否为null而不是不等于;不平等的检查将无法达到以后的案件。最后，您可以考虑将onclick javascript调用移动到JavaScript中。这是一个working fiddle。

HTML

<ul>
  <li>
    <input type="button" name="trip[]" value="PB" class="field">
  </li>
  <li>
    <input type="text" name="platno[]" class="field">
  </li>
  <li>
    <input type="text" name="amount[]" class="field">
  </li>
</ul>

的JavaScript

$(document).ready(function(){
 $("input[type='button']").click(changeBtnText);
});
function changeBtnText( event ) {
  if (event.target.value === null) {        
    event.target.value = "PB"; 
  } else if (event.target.value == 'PB') { 
    event.target.value = "P";
  } else if (event.target.value == 'P') { 
    event.target.value = "B";
  } else if (event.target.value == 'B') { 
    event.target.value = "PB";
  }
}

Answer 4

非常感谢你们！感谢Ehsan，Akshay padwal和Cam，你们在JQuery和JavaScript上都很棒。我非常感谢！

根据我的情况，我也有答案。我注意到的是 - 在分区上捕获Click事件 - 然后编译它以获取或更改我的动态按钮内的属性。我在下面写下了一个代码来检索和更改属性Dynamic Button： -

$（＆＃34; .yourDIVname＆＃34;）。on（＆＃39;点击＆＃39;，＆＃39; .yourClassname＆＃39;，function（）{

            var iValue = this.value;
            alert(iValue);
            if (iValue == 'PB') { $(this).val("B"); return }
            if (iValue == 'B') { $(this).val("P"); return }
            if (iValue == 'P') { $(this).val("PB"); return }
            if (iValue == '') { $(this).val("PB"); return }

            //console.log(this.value);
        });

我认为这就是全部，现在我可以睡得好......

再次感谢您的帮助。

如何在动态按钮HTML上更改值或任何属性

4 个答案:

HTML

的JavaScript