使用Jquery

时间:2017-03-17 16:15:00

标签: javascript jquery svg

我可以看到svg形式的几个按钮。

    var g = svg.append('g')
    .attr('class', 'button')
    .attr('id', 'deploy')
    .attr('transform', 'translate(' + [buttonWidth / 4, 100] +')');

var g2 = svg.append('g')
    .attr('class', 'button')
    .attr('id', 'savefile')
    .attr('transform', 'translate(' + [buttonWidth / 4, 150] +')');

var g3 = svg.append('g')
    .attr('class', 'button')
    .attr('id', 'loadfile')
    .attr('transform', 'translate(' + [buttonWidth / 4,  200] + ')');

1)我想在单击id为'loadfile'的按钮时禁用id为'savefile'的按钮。我编写了代码片段,因为它不起作用。什么价值可能有问题?

function disableButton(disableVar)
{
    console.log("disable button");
    $(disableVar).prop("disabled", true);
}

我的加载按钮是这样的:

button()
.container(g3)
.text(text3)
.count(2)
.cb(function() {
        outer.attr("pointer-events", "none");
        loadFlag = true;
        clearFlag = false;
        $(document).ready(function() {
            $("#loadfile").click(function() {
                var disableSaveFile = "#savefile";
                disableButton(disableSaveFile);
            });
        });
        update();
})();

2)当我点击id为'deploy'的按钮时,我想再次启用id为'savefile'的按钮。以下代码也不适用于启用属性。我的禁用功能和部署按钮如下所示。我该如何解决这个问题?

button()
.container(g)
.text(text)
.count(0)
.cb(function() {
    outer.attr("pointer-events", "none");

                $('#deploy').click(function () {
                var enableSaveFile = "#savefile";
                    enableButton(enableSaveFile );
                });
            });
        });
})();

启用按钮功能

function enableButton(enableVar)
{
    console.log("enable button");
    $(enableVar).prop("enabled", true);
}

2 个答案:

答案 0 :(得分:1)

这是错误的:

$(enableVar).prop("enabled", true);

如何使用相同的按钮方案正确禁用和启用按钮,现在您只需要将其转换为svg



$("#first").click(function(){
  $("#second").prop("disabled",true);
});

$("#third").click(function(){
  $("#second").prop("disabled",false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="first">Click me</button>
<button type="button" id="second">Disable me</button>
<button type="button" id="third">All available</button>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

<button class="bothButtons">Click A</button>
<button class="bothButtons">Click B</button>

使用类

定义两个按钮
$('.bothButtons').on('click', function(){
  $('.bothButtons').prop('disabled', true);
  $(this).prop('disabled', false);
});