如何讓JavaScript運行多次？

Question

編輯：這裏是所有的代碼jsfiddle。 https://jsfiddle.net/ypbd3fgf/2/

我正在使用這個簡單的代碼向父元素添加一個類，以使所選單選按鈕上的文本變成粗體。但是，它只適用於頁面加載。如果您選擇不同的單選按鈕，則新選擇的按鈕不會變爲粗體。我認爲這是因爲代碼只能在頁面加載時運行。如何選擇新的單選按鈕或結賬時更新它？謝謝！

<script type="text/javascript"> 
$(function() { 
     $(".ez-selected").closest('.row').addClass("bold"); 
}); 
</script> 

這是HTML。當選擇單選按鈕時，.ez選擇的類將被添加到.ez-radio div。然後在選擇不同的單選按鈕時刪除。當添加.ez選擇的類時，需要將.bold類添加到.row div。當.ez選擇的類被刪除時.bold類需要從.row div中移除。

<div class="row (bold)"> 
     <input name="TXT870" type="hidden" value="Option 1"> 
     <div class="col-xs-2"> 
      <div class="ez-radio (ez-selected)"> 
       <input class="clearBorder ez-hide" name="CAG3" onclick= 
       "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);" 
       type="radio" value="870_625_0_625"> 
      </div><input name="CAG3QF1" type="hidden" value="0"> 
     </div> 
     <div class="col-xs-7"> 
      <span>Option 1</span> <input class="transparentField" name= 
      "CAG3TX1" readonly size="14" type="text" value=" - Add $5.00"> 
     </div> 
    </div> 

編輯：我添加了下面的JS代碼，添加和刪除.ez選定的類。我試圖製作的這個新的JS只會在添加和刪除下面這個其他JS代碼的.ez選擇的類時添加和刪除粗體類。

(function($) { 
    $.fn.ezMark = function(options) { 
     options = options || {}; 
     var defaultOpt = { 
      checkboxCls: options.checkboxCls || 'ez-checkbox', 
      radioCls: options.radioCls || 'ez-radio', 
      checkedCls: options.checkedCls || 'ez-checked', 
      selectedCls: options.selectedCls || 'ez-selected', 
      hideCls: 'ez-hide' 
     }; 
     return this.each(function() { 
      var $this = $(this); 
      var wrapTag = $this.attr('type') == 'checkbox' ? 
       '<div class="' + defaultOpt.checkboxCls + '">' : 
       '<div class="' + defaultOpt.radioCls + '">'; 
      if ($this.attr('type') == 'checkbox') { 
       $this.addClass(defaultOpt.hideCls).wrap(wrapTag) 
        .change(function() { 
         if ($(this).is(':checked')) { 
          $(this).parent().addClass(
           defaultOpt.checkedCls); 
         } else { 
          $(this).parent().removeClass(
           defaultOpt.checkedCls); 
         } 
        }); 
       if ($this.is(':checked')) { 
        $this.parent().addClass(defaultOpt.checkedCls); 
       } 
      } else if ($this.attr('type') == 'radio') { 
       $this.addClass(defaultOpt.hideCls).wrap(wrapTag) 
        .change(function() { 
         $('input[name="' + $(this).attr(
          'name') + '"]').each(
          function() { 
           if ($(this).is(
            ':checked')) { 
            $(this).parent().addClass(
             defaultOpt.selectedCls 
            ); 
           } else { 
            $(this).parent().removeClass(
             defaultOpt.selectedCls 
            ); 
           } 
          }); 
        }); 
       if ($this.is(':checked')) { 
        $this.parent().addClass(defaultOpt.selectedCls); 
       } 
      } 
     }); 
    } 
})(jQuery); 

Answer 1

編輯： 新的代碼切換到function(){...}格式和查找一個點擊事件的輸入元件上然後檢查是否它的一個單選按鈕並且該父.row然後將其添加的bold和ez-selected類單選按鈕並從其他收音機中刪除它們。

$("input").click(function() { 
    if($(this).attr('type') == 'radio' && $(this).parents('.row').length > 0){ 
     $("input").closest('.row').removeClass('bold ez-selected'); 
     $(this).addClass('bold ez-selected'); 
    } 
}) 

Answer 2

你的代碼看起來有點像這樣：

<script type="text/javascript"> 
    $(function() { 
     $("input[type='radio']").click(function(e) { 
      var targ = e.target 
      $("div[class='row'][class='bold']).removeClass('bold'); 
      $(targ).parents('div[class="row"]').addClass('bold'); 
     }) 

     $(".ez-selected").closest('.row').addClass("bold"); 
    }); 
</script>