Change span class attribute value within javascript function

Question

I have the following code (simplified) and also the javascript that follows. When $quantity=0 and status=1, I am trying to put up an alert message and then change the padding-left value for span class="switch-selection". I am confused on the syntax of how to change the padding.

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

Answer 1

Applying change directly to the first element matching find with JavaScript.

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

Applying change using JQuery to the first elements matching find with JQuery ( less-than selector ).

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

Applying change using JQuery to ALL elements matching find with JQuery.

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

---

Note: When you do $('.classNameBlah') , it returns all the elements wrapped in JQuery, and you can enumerate through them like an array. Thus doing this $('.classNameBlah')[0] will give you the element directly.

Answer 2

您无法更改jquery对象的属性style ，而是使用jquery css函数

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

Answer 3

Here $(this) is referring to the input.

Not sure what exactly you are trying to refer by this

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

Also I do not see any specific element with only .switch class.

You can simply do it using .css method

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

Answer 4

you have some error in your code. after correcting them

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