將單選按鈕放入索引後Javascript不工作

Question

我有一個行數組，每行都有一個單選按鈕（name ='status'）。我已將單選按鈕放入索引中，以便每個單選按鈕都能反映其正確的值。但是，JavaScript不再能夠改變這個值 - 我對我需要對javascript做出的相應改變感到困惑。

<form action="<?php echo $this->form_action; ?>" method="post"> 
    <p class="hide"><input name="status" type="text" value="" /></p> 
    <table id="manage-items" cellpadding="0" cellspacing="0" border="0"> 
     <thead> 
      <tr> 
       <th><?php echo $this->translate('Item');?></th> 
       <th><th><?php echo $this->translate('Status');?></th></th> 
      </tr> 
     </thead> 

     <tbody> 
      <?php $ind = 0; ?> 
      <?php foreach ($this->items as $item) { 
       $item_link = 'type=product'; 
       ?> 
        <tr id="item_<?php echo $ind; ?>"> 
         <td data-label="Title"><span class="orangelink"><?php echo $item->title; ?></span></td> 
         <td align="left" style="padding-left:22px" class="color-status-<?php echo $item['active']; ?>"> 
          <?php if (in_array($item['active'], array(0, 1))) { ?> 
           <input type="radio" name="item[<?php echo $ind; ?>][status]" value="1" <?php if ($item['active'] == 1) echo 'checked'; ?>>Active 
           <br> 
           <input type="radio" name="item[<?php echo $ind; ?>][status]" value="0" <?php if ($item['active'] == 0) echo 'checked'; ?>>Inactive 
          <?php } else { ?> 
           <?php echo $item['active']; ?> 
          <?php } ?> 
         </td> 
        </tr> 
       <?php $ind++; ?> 
      <?php } ?> 
     </tbody> 
    </table> 
</form> 


<script type="text/javascript"> 
    //console.log(jQuery) 
    head.ready('jquery', function() { 
     $(document).ready(function() { 

      $('input[name="radio"]').click(function() { 
       var status = this.value; 
       var id = $(this).parents('tr').attr('id'); 
       console.log('here now') 
       $.ajax({ 
        type: 'post', 
        url: "?module=items&controller=block&action=modDaStatusBro", 
        data: 'id=' + id + '&status=' + status, 
        beforeSend: function() { 
         $('#' + id).animate({ 
          'backgroundColor': '#FFBFBF' 
         }, 400); 
        }, 
        success: function (result) { 
         if (result == 'ok') { 
          $.get(window.location.href, function (data) { 
           $('#' + id).html($(data).find('#' + id).html()); 
           setTimeout(function() { 
            $("#" + id + "").animate({'backgroundColor': 'transparent'}, 400).find('.tooltip').simpletooltip(); 
            deletePage(); 
           }, 500); 
          }); 
         } else { 
          alert(result); 
          $("#" + id + "").animate({'backgroundColor': 'transparent'}, 400); 
         } 
        } 
       }); 
      }); 
     }); 
    }); 

</script> 

Answer 1

<tr id="<?php echo $item['id']; ?>"> 
.... 
</tr>  

之間在PHP產生表的數據元素似乎不包含名爲 「狀態」 的輸入元件。對於$ind每個值生成的HTML預計

 <input type="radio" name="item[n][status]" .... Active 
     <input type="radio" name="item[n][status]" .... Inactive 

其中n是$值IND。但是選擇器

 $('input[name="status"]').click(function() { 

與名稱格式不匹配。一個一個鍵行程解決方案將是一個 * wild card添加到選擇在名稱值匹配「狀態」的任何地方：

 $('input[name*="status"]').click(function() { 

存在其它可能性，如添加一種特殊的類名來影響每個單選按鈕（不推薦），或者爲查詢選擇器（可行）找到的每個無線電輸入添加一個特殊的數據屬性。

---

腳註：TR元素周圍的DIV元素不應該在那裏。 DIV未列爲允許的子元素 TBODY元素，也不是允許的父元素 TR元素。

---

（回答評論）

需要用於性質，例如的color animation甲jQuery插件backgroundColor。

代碼可以從CDN中的

https://code.jquery.com/color/jquery.color-2.1.2.min.js，或
https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js

下載或整個包可以從GitHub