Question

我想更改表单中范围的内容 HTML：

<form action="javascript:submit()" id="form" class="panel_frame">

    <label>Origin:</label>
    <div class="input-group" id="input-group">
        <input type="text" id="origin" name="origin" class="form-control">
        <span class="input-group-btn">
            <button id="btn-default" class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
            </button>
        </span>
    </div>

我想要改变的是<span class="input-group-btn">与

的内容

<button id="btn-default" class="btn btn-default" type="button">
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>

所以有什么变化：要移除的图标图钉和将useCurrentPosition移动到clearPosition的动作。

我＆＃39;使用jquery，尽管我已经在Stack上阅读了关于类似问题的其他答案：How can I change the text inside my <span> with jQuery?和how to set a value for a span using JQuery我还没有解决问题。

我试过了：

$("#input-group span").html('
    <button id="btn-default" class="btn btn-default" type="button" onclick="br_bus.useCurrentPosition()">
    <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
    </button>
');

，给一个范围的id并修改完整的div，但没有一个解决了我的问题。我错过了什么？

Answer 1

我建议在一个函数中使用一个标志来定义它应遵循的逻辑，而不是更改onclick属性中调用的函数。

例如：

function positionChange(this){
   var $this = $(this);
   if(!$this.data("currentpositionused")){
       //useCurrentPosition() code here
       $this.data("currentpositionused", true);
   }
   else {
       //clearPosition() code here
       $this.data("currentpositionused", false);
}

然后将您的HTML更改为：

<button class="btn btn-default" type="button" onclick="positionChange(this)">

Answer 2

这里有一种方法来克服改变onclick属性的问题，这是一种不好的做法，不存储Global var，并使用jQuery委托（学会使用它，它真的很好）：< / p>

$(document).on('click','.btn', positionChange); // Give that button an id on his own and replace '.btn' with '#newId'

// Not using an anonymous function makes it easire to Debug
function positionChange(){
   var $btn = $(this), // Caching jQuery elements is good practice
       $span = $btn.find('span'), // Just caching
       pushpinApplied = $span.hasClass('glyphicon-pushpin'); // Check which icon is applied

   ( pushpinApplied ) ? useCurrentPosition() : clearPosition();

   $span.toggleClass( 'glyphicon-pushpin glyphicon-remove' );
}

Answer 3

试试这个：

$("span.input-group-btn").html('<button class="btn btn-default" type="button" onclick="clearPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>');

Answer 4

如果您只想更改特定onclick中button的{{1}}属性，可以在脚本中使用以下内容。

span

修改

$(document).ready(function(){ $("span.input-group-btn button").attr("onclick","clearPosition()"); });

还了解如何更改/添加/删除属性值....

Answer 5

是这样吗？

how to change onclick event with jquery?

$("#id").attr("onclick","new_function_name()");

jquery change class name

$("#td_id").attr('class', 'newClass');

如果要添加类，请改用.addclass（），如下所示：

$("#td_id").addClass('newClass');

如何更改跨度内的html

5 个答案: