如何让javascript多次运行？ [英] How do I get javascript to run more than once?
问题描述
编辑：这是一个包含所有代码的jsfiddle。 https://jsfiddle.net/ypbd3fgf/2/
here is a jsfiddle with all the code. https://jsfiddle.net/ypbd3fgf/2/
我正在使用这个简单的代码将一个类添加到父元素，以使选定的单选按钮上的文本变为粗体。但是，它仅适用于页面加载。如果选择不同的单选按钮，则新选择的按钮不会变为粗体。我认为这是因为代码只在页面加载时运行。如何选择新的单选按钮或结帐时更新它？谢谢！
I'm using this simple code to add a class to a parent element in order to make the text on a selected radio button turn bold. However, it only works on page load. If you select different radio buttons, the newly selected buttons don't turn bold. I think it's because the code only runs on page load. How do I get it to update when a new radio button or checkout is selected? Thanks!
<script type="text/javascript">
$(function() {
$(".ez-selected").closest('.row').addClass("bold");
});
</script>
这是HTML。选择单选按钮时，.ez选择的类将添加到.ez-radio div。然后在选择其他单选按钮时将其删除。添加.ez选定的类时，需要将.bold类添加到.row div。删除.ez选择的类时，需要从.row div中删除.bold类。
The is the HTML. The .ez-selected class is added to the .ez-radio div when a radio button is selected. And then removed when a different radio button is selected. When the .ez-selected class is added, the .bold class needs to be added to the .row div. When the .ez-selected class is removed the .bold class needs to be removed from the .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选择的类时。
I added the JS code below that adds and removes the .ez-selected class. This new JS that I'm trying to make will simply be adding and removing the bold class when the .ez-selected class is added and removed by this other JS code below.
(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);
推荐答案
你的代码应该看起来像这样：
your code should look somewhat like this:
<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>
这篇关于如何让javascript多次运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
