Question

我有一个满意的div，我希望用户能够通过输入数字来设置另一个div的不透明度。

$('#btn').click(function(){
    $('#d').css("opacity", "val('"+$("#set").html()+"')"); //sets opacity - doesn't work
    $('#set').html(val('"+$("#set").html()+"')); //input stays as editable text - works
});

我对url输入没有任何问题，但在这种情况下我没有成功使用val或attr。我想我没有从html中获取val / attr。

如何解决这个问题？

Answer 1

我更新了你的小提琴，这是正确的代码： http://jsfiddle.net/MeBeiM/w21q35tw/2/

我还添加了一个检查：如果用户输错了（例如'cat'或-3），那么它会提示“错误值！”，这里是JavaScript代码：

$('#btn').click(function () {
    var opacity = +$('#set').text();
    if ((opacity === 0 || opacity > 0) && opacity <= 1) {
        $('#d').css("opacity", opacity);
        $('#set').html('');
    } else {
        alert('Wrong value!');
    }
});

Answer 2

简单修复：

$('#btn').click(function(){
    $('#d').css("opacity", $("#set").text() / 100);
    $('#set').val('"+$("#set").html()+"');
});

演示：http://jsfiddle.net/w21q35tw/1/（框中输入20表示不透明度为20％）

Answer 3

尝试

$('#btn').click(function(){
    $('#d').css("opacity", $("#set").text());
    $('#set').html(val('"+$("#set").html()+"'));
});

希望这有帮助

Answer 4

您满意的<div>不是输入表单，因此它没有val()。而是使用属性.text（）来获取innerHTML值。

更改

$('#d').css("opacity", "val('"+$("#set").html()+"')");

要

$('#d').css("opacity", $("#set").text());

Answer 5

这是有效的fiddle。你在更改CSS部分时犯了错误：

使用.text()代替.val（），因为它是CONTENTEDITABLE div。
其次，你把报价放在错误的地方。

Answer 6

你的JS错了。你需要这个：

$('#d').css("opacity", $("#set").html());

使用contenteditable div中的用户输入设置元素不透明度

6 个答案: