如何使用jQuery动态设置链接按钮文本(也包括图标)

时间:2015-04-07 06:57:24

标签: c# jquery html asp.net

我在asp.net服务器端使用链接按钮,在某些条件下添加/编辑两个条件

    if (btnAdd.Text == "<span class=\"glyphicon glyphicon-floppy-disk\></span>&nbsp;&nbsp;&nbsp;Add") 
{do someDB update}
else (btnAdd.Text == "<span class=\"glyphicon glyphicon-edit\"></span>&nbsp;&nbsp;&nbsp;Edit")
{do someDB update}

现在我想从客户端重置按钮使用jquery更改链接按钮的文本特定行的jquery代码是

$('[id*=btnAdd]').html("<span class=\"glyphicon glyphicon-floppy-disk\"></span>&nbsp;&nbsp;&nbsp;Add");

如果数据已经存在于db中,那么在retreival上

btnAdd.Text == "<span class=\"glyphicon glyphicon-edit\"></span>&nbsp;&nbsp;&nbsp;Edit"

其他

btnAdd.Text == "<span class=\"glyphicon glyphicon-floppy-disk\></span>&nbsp;&nbsp;&nbsp;Add"

现在我第一次检查已经存在的数据,那么btnAdd的值是编辑,而在点击重置按钮时它应该是&#34;添加&#34;但它不起作用。

它只重置前面按钮的文本,但它总是显示在aspx.cs文件中 btnAdd.Text值为

"<span class=\"glyphicon glyphicon-edit\"></span>&nbsp;&nbsp;&nbsp;Edit"

请建议解决方案

1 个答案:

答案 0 :(得分:0)

这不是比较标记的最佳方法。你必须添加一些数据,类等。 例如:

<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <script>
        jQuery(document).ready(function(){
            jQuery('#test').on('click', function(){
                var state = jQuery(this).attr('data-state');
                if (state === 'add') {
                    jQuery(this).attr('data-state', 'edit');
                    jQuery(this).find('.glyphicon').removeClass('glyphicon-floppy-disk').addClass('glyphicon-edit');
                    jQuery(this).find('.button-text').text('Edit');
                }
                else if (state === 'edit') {
                    jQuery(this).attr('data-state', 'add');
                    jQuery(this).find('.glyphicon').removeClass('glyphicon-edit').addClass('glyphicon-floppy-disk');
                    jQuery(this).find('.button-text').text('Add');
                }
            });
        });
    </script>
</head>

<body>
    <button type="button" id="test" class="btn btn-default" data-state="add" aria-label="Left Align">
        <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span><span class="button-text">Add</span>
    </button>
</body>
</html>