jQuery切换属性值

问题描述 投票:3回答:4

我想切换所有元素属性:

$('[contenteditable]').prop('contenteditable', !$(this).prop('contenteditable'));

它只会在第一次切换到true,但在第二次切换为false。怎么了?

javascript jquery
4个回答
3
投票

更新FIDDLE

如上所述:它返回字符串,因此使用三元运算符可以解决方法:一行解决方案

$('#contenteditable1').attr('contenteditable',$(this).attr('contenteditable')==='true'?'false':'true' );

老=>

$('#contenteditable1').click(function()
   {
       if($('#contenteditable1').attr('contenteditable')==='true'){
           //alert("true");
           $('#contenteditable1').attr('contenteditable','false');
       }
       else{
            $('#contenteditable1').attr('contenteditable','true');           
       }
   });   

6
投票

使用prop()的回调函数

$('button').click(function() {
  $('#contenteditable1').prop('contenteditable', function(i, val) {
    return val == "false" ? true : false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contenteditable1">hiu</div>
<button>click</button>

0
投票

变量“this”仅指功能块的上下文。您必须更改为选择所有元素并使用forEach切换所有值。


0
投票

如果属性有多个值,我使用此代码切换所有属性值中的值:

// jquery toggle just the attribute value
$.fn.toggleAttributeVal = function (attr, val) {
    var valArray =  $(this).attr(attr).split(" ");
    var elementIndex = valArray.indexOf(val);
    if (elementIndex >= 0) {
        valArray.splice(elementIndex, 1);
    }
    else {
        valArray.splice(-1, 0, val);
    }
    $(this).attr(attr, valArray.join(" "));
    return this;
};

示例用法(使用Font Awesome 5 JS版本):

// jquery toggle just the attribute value
$.fn.toggleAttributeVal = function(attr, val) {
  var valArray = $(this).attr(attr).split(" ");
  var elementIndex = valArray.indexOf(val);
  if (elementIndex >= 0) {
    valArray.splice(elementIndex, 1);
  } else {
    valArray.splice(-1, 0, val);
  }
  $(this).attr(attr, valArray.join(" "));
  return this;
};

$(document).ready(function() {
  $("#btn1").click(function() {
    $("#icon3 .fa-cog").toggleAttributeVal("data-fa-transform", "right-2");
  });
});
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="fa-3x" id="icon3">
      <span class="fa-layers fa-fw">
                <i class="far fa-circle" data-fa-transform="grow-1"></i>
                <i class="fas fa-cog" data-fa-transform="shrink-9 up-2 right-2"></i>
                <i class="fas fa-arrow-left" data-fa-transform="shrink-9 down-2 left-2"></i>
            </span>
    </div>
    <div class="row">
      <div class="col">
        <button class="btn btn-primary" id="btn1">toggle Attribute</button>
      </div>
    </div>
</body>

</div>
© www.soinside.com 2019 - 2024. All rights reserved.