如何让javascript多次运行？

编辑：这是一个包含所有代码的JSFIDLE

我使用这个简单的代码向父元素添加一个类，以便使选中单选按钮上的文本变为粗体。但是，它只在页面加载时起作用。如果选择不同的单选按钮，则新选择的按钮不会变为粗体。我想这是因为代码只在页面加载时运行。选择新单选按钮或签出时，如何使其更新？谢谢

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

$（函数（）{
$（“.ez选定”）.closest（“.row”）.addClass（“粗体”）；
}); 

最重要的是HTML。当选择单选按钮时，将.ez selected类添加到.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>

选择1

编辑：我在下面添加了添加和删除.ez所选类的JS代码。当下面的其他JS代码添加和删除.ez选择的类时，我尝试创建的这个新JS将只是添加和删除粗体类

(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);

（函数（$）{
$.fn.ezMark=函数（选项）{
选项=选项| |{}；
var defaultOpt={
checkboxCls:options.checkboxCls | |“ez checkbox”，
radioCls:options.radioCls | |“ez radio”，
checkedCls:options.checkedCls | |“ez checked”，
selectedCls:options.selectedCls | |“ez selected”，
隐藏：“ez隐藏”
};
返回此值。每个（函数（）{
var$this=$（this）；
var wrapTag=$this.attr（'type'）=='checkbox'？
'' :
'';
if（$this.attr（'type'）=='checkbox'）{
$this.addClass（defaultOpt.hideCls）.wrap（wrapTag）
.change（函数（）{
如果（$（this）.is（':checked'））{
$（this）.parent（）.addClass(
defaultOpt.checkedCls）；
}否则{
$（this）.parent（）.removeClass(
defaultOpt.checkedCls）；
}
});
如果（$this.is（':checked'））{
$this.parent（）.addClass（defaultOpt.checkedCls）；
}
}else if（$this.attr（'type'）='radio'））{
$this.addClass（defaultOpt.hideCls）.wrap（wrapTag）
.change（函数（）{
$（'input[name=“”+$（this）.attr(
'名称'）+'“]'）。每个(
函数（）{
if（$（this）.is(
“：选中”）{
$（this）.parent（）.addClass(
defaultOpt.selectedCls
);
}否则{
$（this）.parent（）.removeClass(
defaultOpt.selectedCls
);
}
});
});
如果（$this.is（':checked'））{
$this.parent（）.addClass（defaultOpt.selectedCls）；
}
}
});
}
})（jQuery）；

编辑： 新代码切换到

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');
     }
})

编辑： 新代码切换到

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');
     }
})

---

您的代码应该有点像这样：

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

$（函数（）{
$（“输入[type='radio']”）。单击（函数（e）{
var targ=e.target
$（“div[class='row'][class='bold']）。removeClass（'bold'）；
$（target）.parents（'div[class=“row”]）.addClass（'bold'）；
})
$（“.ez选定”）.closest（“.row”）.addClass（“粗体”）；
}); 

您的代码应该是这样的：

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

$（函数（）{
$（“输入[type='radio']”）。单击（函数（e）{
var targ=e.target
$（“div[class='row'][class='bold']）。removeClass（'bold'）；
$（target）.parents（'div[class=“row”]）.addClass（'bold'）；
})
$（“.ez选定”）.closest（“.row”）.addClass（“粗体”）；
}); 

在按钮的

事件处理程序中运行它。您应该使用label元素，而不是span元素。你也应该考虑只使用CSS而不使用JS。这是不必要的，增加了复杂性。看看这个。。。您不需要运行代码两次。研究均匀传播。您需要在静态父级上添加处理程序并获取事件目标。也许可以添加一个包含完整代码的fiddle，这样我们可以更好地提供帮助。在按钮的
事件处理程序中运行它。您应该使用label元素，而不是span元素。你也应该考虑只使用CSS而不使用JS。这是不必要的，增加了复杂性。看看这个。。。您不需要运行代码两次。研究均匀传播。您需要在静态父级上添加处理程序并获取事件目标。也许可以添加一个完整的代码，这样我们可以更好地提供帮助。我很感谢您的回复，但是您能告诉我整个js的外观，包括