在javascript函數中更改span類別屬性值

我有以下代碼（簡化）以及下面的JavaScript。當$ quantity = 0和status = 1時，我試圖提出一條警告消息，然後更改span class =「switch-selection」的填充左值。我很困惑如何改變填充的語法。在javascript函數中更改span類別屬性值

<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>

來源

2016-12-05 ian

使用'的CSS後（{ '填充左'： '60像素'}）' – Tushar

有一個錯字或這裏一個錯誤'..style.paddingLeft ='（2點） –

將更改直接應用到與JavaScript匹配的第一個元素。

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

使用JQuery匹配找到的JQuery（less-than selector）的第一要素的應用變化。

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

將變更使用JQuery應用於所有匹配find和jQuery的元素。

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

注意：當你做$('.classNameBlah')，它返回包在JQuery的所有元素，你可以通過它們像一個數組枚舉。因此，這樣做$('.classNameBlah')[0]將直接給你這個元素。

來源

2016-12-05 05:43:30

你不能改變一個jQuery對象的屬性style而是使用jQuery的css功能

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

來源

2016-12-05 05:44:19 madalinivascu

由於@madalin ivascu。這完美的作品，除了。。。我在我的請求中犯了一個錯誤：單選按鈕實際上是一個索引爲$ ind的foreach循環。我已經添加了一些代碼來說明這一點。有沒有一種簡單的方法可以在您給我的解決方案中反映出這一點。例如：$（「。switch-selection」）[ind] .css（「paddingLeft」，「60px」）; Tx。 – ian

這裏$(this)是指輸入。

不知道你是想通過這個

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

指我也沒有看到任何具體的元素，只有.switch類到底是什麼。

可以根本就利用.css方法

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

來源

2016-12-05 05:49:49 brk

Tx user2181397。除此之外，此功能完美無缺。。。我在我的請求中犯了一個錯誤：單選按鈕實際上是一個索引爲$ ind的foreach循環。我已經添加了一些代碼來說明這一點。有沒有一種簡單的方法可以在您給我的解決方案中反映出這一點。例如：$（「。switch-selection」）[ind] .css（「paddingLeft」，「60px」）; Tx。 – ian

它，你必須在你的代碼中的一些錯誤。糾正他們

$(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"); 
     } 
    }); 
});

來源

2016-12-05 05:51:23 reza

感謝reza。這完美的作品，除了。。。我在我的請求中犯了一個錯誤：單選按鈕實際上是一個索引爲$ ind的foreach循環。我已經添加了一些代碼來說明這一點。有沒有一種簡單的方法可以在您給我的解決方案中反映出這一點。例如：$（「。switch-selection」）[ind] .css（「paddingLeft」，「60px」）; Tx。 – ian

在javascript函數中更改span類別屬性值

回答

相關問題