使用Jquery在点击时更改宽度

Question

我是一名能翻译文本的助手。

我有一个使用Bootstrap制作的进度条，当width属性改变时，当前进度也会相应地改变。我希望在用户切换时增加10％并减少10％的宽度属性。

这里是我的代码：

<div class="progress progress-danger progress-striped active"> 
       <div class="bar" style="width:30%"></div>
</div>

<a id="updateit">Click to change the progress</a>

$(function(){
  $("#updateit").toggle(function(){
     $('.bar').css("width", + '10%');
  });
});

感谢您的提前帮助！:)

- user1163073

Answer 1

这是一个工作的示例

据我所知，您无法添加百分比，因此我使用.progress的宽度进行转换。

0.1 = 10%

$(function(){
  $("#updateit").toggle(
   function(){
     $('.bar').css("width", '+=' + (0.1 * $('.progress').width()));
     return false;
  },
  function(){
     $('.bar').css("width", '-=' + (0.1 * $('.progress').width()));
     return false;
  });
});

- VVV

Answer 2

另一个答案中的示例还可以，但.bar最终将具有固定的像素值。如果您仍想以百分比设置值（如果父元素更改其宽度，则.bar也会对百分比值进行更改），则可以尝试此操作：

$(function(){
    var $bar = $(".bar");
    $("#updateit").toggle(function(){
        $bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) +10 + '%');
    },
    function(){
        $bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');
    });
});

- Pablo

Answer 3

我注意到你的代码有几个问题。

首先，请确保在锚点上有一个 href。即使它没有被使用，这是正确的 HTML（将 return false; 添加到你的 JavaScript 中可以防止它跟随链接）。因为没有 href，我的浏览器根本无法识别该链接。

接下来，你想让用户点击链接然后切换宽度，对吗？那么你需要使用 click() 事件。

之后，这是我想出来的：

jQuery

var isOn = true;
$(function(){
   $("#updateit").click(function(){
      console.log(isOn);
      if ( isOn ){
          isOn = false;
          $('.bar').css("width", '10%');
      } else {
          isOn = true;
          $('.bar').css("width", '20%');
      }
      return false;
  });
});​

HTML

<div class="progress progress-danger progress-striped active"> 
       <div class="bar"></div>
</div>

<a href="#" id="updateit">Click to change the progress</a>
​

CSS（用于显示测试的.bar和设置初始宽度）

.bar{
    width:20%;
    height:20px;
    background:#600;
}​

这个jsFiddle

- DACrosby