我有一个名为 Main Content 的 textArea,下面是两个复选框
- 短信
- 电子邮件
当用户同时选中两个复选框时,即 SMS 和电子邮件,则 SMS 和 EMAIL 文本框都显示与主内容文本框相同的内容,并具有附加功能,即 SMS 和 EMAIL 复选框作为 SMS 内容与上述主要内容相同,电子邮件内容与以上主要内容。请参考图1
默认情况下,当用户同时选择 SMS 和 EMAIL 时,应选中 SMS 和 EMAIL 的这两个复选框。但是,无论 EMAIL 或 SMS 复选框选择的顺序如何,第一个选择的复选框始终保持“未选中与上述主要内容相同的 SMS/Email 内容”。请参考下一张图片
如果用户同时选择 SMS 和 EMAIL 复选框,则应选中 SMS 内容和电子邮件内容下的所有复选框
处理 SMS 和 EMAIL 选项卡的 JQuery 代码代码是 函数 handleChannelTabs 处理 Displaying Second Image with SMS 和 EMAIL 的主要逻辑被选中
handleChannelTabs();
$("[data-channel-checkboxes]").find("input[type=checkbox]").each(
function() {
var self = $(this)
var contentDiv = $('[data-content-for=' + self.val() + ']')
var checkedChannelsLength = $("[data-channel-checkboxes]").find(
"input[type=checkbox]:checked").length;
if (self.is(':checked')) {
if (checkedChannelsLength > 1) {
contentDiv.children().appendTo(
$('[data-tab-content-for=' + self.val()
+ ']'))
} else {
$('[data-tab-content-for=' + self.val() + ']')
.children().appendTo(contentDiv)
}
}
})
$("[data-use-main]").find("input[type=checkbox]").change(function(){
$this = $(this)
if ($this.is(':checked')) {
$this.parents('[data-template-for]').find('[data-main-message-content]').removeClass('hidden').find('.word-break').html($('[data-main-message]').find('textarea').val())
$this.parents('[data-template-for]').find('[data-textare-content]').addClass('hidden').find('textarea').val('')
} else {
$this.parents('[data-template-for]').find('[data-textare-content]').removeClass('hidden').find('textarea').val($('[data-main-message]').find('textarea').val())
$this.parents('[data-template-for]').find('[data-main-message-content]').addClass('hidden').find('.word-break').val('')
}
})
function handleChannelTabs() {
var checkedBoxes = [];
var checkedChannelsLength = $("[data-channel-checkboxes]").find(
"input[type=checkbox]:checked").length;
$("[data-channel-checkboxes]").find("input[type=checkbox]:checked")
.each(function() {
checkedBoxes.push($(this).val())
var self = $(this)
var contentDiv = $('[data-content-for=' + self.val() + ']')
if (self.is(':checked')) {
if (checkedChannelsLength > 1) {
contentDiv.children().appendTo(
$('[data-tab-content-for=' + self.val()
+ ']'))
} else {
$('[data-tab-content-for=' + self.val() + ']')
.children().appendTo(contentDiv)
}
}
})
var isFirstTab = true;
$("[data-channel-content]").toggleClass('hidden', checkedBoxes.length < 2)
$("[data-channel-content]").find('ul').find('li').each(
function(index) {
var currentLi = $(this);
if (jQuery.inArray($(currentLi).find('a').html(),
checkedBoxes) >= 0) {
$(currentLi).removeClass('hidden')
if (isFirstTab) {
isFirstTab = false;
$(currentLi).addClass("active").css('margin-left', '20px').find('a').addClass("act-a");
$($('[data-tab-content-for]')[index]).removeClass('hidden')
} else {
$(currentLi).removeClass("active").css('margin-left', '0px').find('a').removeClass("act-a");
$($('[data-tab-content-for]')[index]).addClass('hidden')
}
} else {
$(currentLi).addClass('hidden')
}
})
}
我添加了另一个代码,即
function moveTemplates(onLoad, $this) {
alert('Inside MoveTemplates 01');
var changedChannel = $this.val()
alert('Inside MoveTemplates 02' + changedChannel);
var divForCurrentChannel = $('[data-content-for=' + changedChannel
+ ']')
var mainMessage = $('[data-main-message]').find('textarea').val()
var checkedChannelsLength = $("[data-channel-checkboxes]").find(
"input[type=checkbox]:checked").length;
alert('Inside MoveTemplates 03' + checkedChannelsLength);
if ($this.is(':checked')) {
alert('Inside MoveTemplates 04');
divForCurrentChannel.find('textarea[data-copy-main]').val(
mainMessage)
alert('Inside MoveTemplates 05');
divForCurrentChannel.removeClass('hidden')
alert('Inside MoveTemplates 06');
} else {
alert('Inside else MoveTemplates 07');
$('[data-tab-content-for=' + $this.val() + ']').children()
.appendTo(divForCurrentChannel)
alert('Inside else MoveTemplates 08');
divForCurrentChannel.addClass('hidden')
alert('Inside else MoveTemplates 09');
}
alert('Inside else MoveTemplates 10');
$('[data-use-main]').toggleClass('hidden', checkedChannelsLength < 2)
alert('Inside else MoveTemplates 11');
handleChannelTabs()
toggleMainAndTextArea()
}
问题似乎在 alert('Inside else MoveTemplates 10'); 和 alert('Inside else MoveTemplates 11');
The checked value is getting unchecked when more than 1 channels are selected.
$('[data-use-main]').toggleClass('hidden', checkedChannelsLength < 2)
以上说法正确吗?