在javascript函数中更改跨度类属性值答案

【问题标题】：Change span class attribute value within javascript function在javascript函数中更改跨度类属性值
【发布时间】：2016-12-05 05:40:27
【问题描述】：

我有以下代码（简化）以及后面的 javascript。当 $quantity=0 和 status=1 时，我试图发出警告消息，然后更改 span class="switch-selection" 的 padding-left 值。我对如何更改填充的语法感到困惑。

<table>
<?php $ind = 0; ?>
    <?php foreach ($this->items as $item) {;?>
      <tr id="<?php echo $item['id']; ?>">
        <td class="Quantity"><span>$item['quantity']</span></td>
        <td class="status">
          <label for="a" class="switch-label switch-label-off">Active</label>
          <input type="radio" id="a" name="test1" class="switch-label switch-label-off" value="1"  <?php if ($item['active'] == 1)> >
          <label for="b" class="switch-label switch-label-off">Active</label>
          <input  id="b" type="radio" name="test1" class="switch-label switch-label-on" value="0"  <?php if ($item['active'] == 1)> >
          <span class="switch-selection"></span>
        </td>
      </tr>
      <?php $ind++; ?>
    <?php } ?>
</table>

<script type="text/javascript">
$(document).ready(function () {
   if (typeof ind == "undefined") {
      ind = 0;
   }

    $("input").on('change',function(){
        var status = this.value;
        var quantity = $(this).closest("tr").find(".Quantity > span").text();
        if (quantity == 0 && status == 1) {
            window.alert("To activate a product, your quantity must be at least 1.");
            $(this).find(".switch > span")..style.paddingLeft = "60px";
        } 
});


</script>

【问题讨论】：

使用.css({'padding-left': '60px'})
这里有错字或错误..style.paddingLeft = （2点）

标签： javascript php jquery css attributes

【解决方案1】：

您不能更改 jquery 对象上的属性 style，而是使用 jquery css 函数

$(this).find(".switch > span").css('paddingLeft',"60px");

【讨论】：

感谢@madalin ivascu。这完美地工作，除了。 . .我在请求中犯了一个错误：单选按钮实际上是在一个索引为 $ind 的 foreach 循环中。我添加了一些代码来说明这一点。有没有一种简单的方法可以在您给我的解决方案中反映这一点。类似于： $(".switch-selection")[ind].css("paddingLeft","60px");发送。

【解决方案2】：

这里$(this)指的是输入。

不确定你到底想通过这个来引用什么

$(this).find(".switch > span")..style.paddingLeft = "60px";

我也没有看到任何只有 .switch 类的特定元素。

您可以使用.css 方法简单地做到这一点

$('your element').css('padding-left','60px')

【讨论】：

发送用户 2181397。这完美地工作，除了。 . .我在请求中犯了一个错误：单选按钮实际上是在一个索引为 $ind 的 foreach 循环中。我添加了一些代码来说明这一点。有没有一种简单的方法可以在您给我的解决方案中反映这一点。类似于： $(".switch-selection")[ind].css("paddingLeft","60px");发送。

【解决方案3】：

您的代码中有一些错误。改正后

$(document).ready(function () {
    $("input").on('change',function(){
        var status = this.value;
        var quantity = $(this).closest("tr").find(".Quantity > span").text();
        if (quantity == 0 && status == 1) {
            window.alert("To activate a product, your quantity must be at least 1.");
            $(".switch-selection").css("paddingLeft","60px");
        }
   }); 
});

【讨论】：

谢谢礼萨。这完美地工作，除了。 . .我在请求中犯了一个错误：单选按钮实际上是在一个索引为 $ind 的 foreach 循环中。我添加了一些代码来说明这一点。有没有一种简单的方法可以在您给我的解决方案中反映这一点。类似于： $(".switch-selection")[ind].css("paddingLeft","60px");发送。

【解决方案4】：

使用 JavaScript 将更改直接应用于匹配 find 的第一个元素。

$(this).find(".switch > span")[0].style.paddingLeft = "60px";

使用 JQuery 将更改应用于与 JQuery (less-than selector) 匹配的第一个元素。

$(this).find(".switch > span:lt(1)").css('padding-left', '60px');

使用 JQuery 将更改应用于与 JQuery 匹配的所有元素。

$(this).find(".switch > span").css('padding-left', '60px');

注意：当你做$('.classNameBlah')时，它会返回所有用JQuery包装的元素，你可以像数组一样枚举它们。因此，这样做$('.classNameBlah')[0] 将直接为您提供元素。

【讨论】：