该功能仅在页面加载时有效,而在点击时无效

时间:2018-06-26 06:01:30

标签: javascript jquery html css

var names = [];
$(document).ready(function(){
	$('#selauth option').each(function(){
		names.push($(this).text());
	});
});

function givemefirst() {
	$('.pmarked').removeClass('pmarked');
	$('.postitle').eq(0).addClass('pmarked');
	givemestuff();
}

givemefirst();

function givemestuff() {
	let obj = $('.pmarked');
	$('.optemp').remove();
	let auth = obj.attr('data-auth');
	if (names.includes(auth)) {
		$('#selauth').val(auth);
	}
	else {
		$('#selauth').append("<option class='optemp'>" + auth + "</option>");
		$('#selauth').val(auth);
	}
}

$(document).on('click', '.postitle', function() {
	$('.pmarked').removeClass('pmarked');
	$(this).addClass('pmarked');
	givemestuff();
});
.postitle{
cursor:pointer;
}

.pmarked{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='postitle' data-auth='earth'>lorem ipsum</div>
<div class='postitle' data-auth='moon'>lorem ipsum</div>
<div class='postitle' data-auth='sun'>lorem ipsum</div>
<br>
<select id='selauth'>
<option>moon</option>
<option>sun</option>
</select>

页面加载时一切正常。
option-earth被添加到selauth并被自动选择。

单击下一个postitle也可以-option-earth已删除...

但是请再次单击第一个postitle-selauth为空白,即未选择任何选项,即未添加option-earth

怎么了?

3 个答案:

答案 0 :(得分:3)

您只需将其更改为此:

演示:https://codepen.io/creativedev/pen/RJYapd

var names = [];
$(document).ready(function(){
    $('#selauth option').each(function(){
        names.push($(this).text());
    });
});

function givemefirst() {
    $('.pmarked').removeClass('pmarked');
    $('.postitle').eq(0).addClass('pmarked');
    givemestuff();
}

givemefirst();

function givemestuff() {
    let obj = $('.pmarked');
  $('.optemp').remove();
    let auth = obj.attr('data-auth');  
    if ($("#selauth option[value='"+auth+"']").length > 0) {
        $('#selauth').val(auth);
    }
    else {
        $('#selauth').append("<option class='optemp' value='"+auth+"'>" + auth + "</option>");
        $('#selauth').val(auth);
    }
}

$(document).on('click', '.postitle', function() {
    $('.pmarked').removeClass('pmarked');
    $(this).addClass('pmarked');
    givemestuff();
});

答案 1 :(得分:1)

如果从select中删除任何临时选项,则还需要从数组names中将其删除。 因此,我有条件地从数组names中删除了临时选项值:

if($('.optemp').length == 0){   
    names.splice(names.indexOf(auth), 1 );
}

var names = [];
$(document).ready(function(){
	$('#selauth option').each(function(){
		names.push($(this).text());
	});
});

function givemefirst() {
	$('.pmarked').removeClass('pmarked');
	$('.postitle').eq(0).addClass('pmarked');
	givemestuff();
}

givemefirst();

function givemestuff() {
	let obj = $('.pmarked');
	let auth = obj.attr('data-auth');
  if($('.optemp').length == 0){   
    names.splice(names.indexOf(auth), 1 );
  }
  $('.optemp').remove();
  
	if (names.includes(auth)) {
		$('#selauth').val(auth);
	}
	else {
		$('#selauth').append("<option class='optemp'>" + auth + "</option>");
		$('#selauth').val(auth);
	}
}

$(document).on('click', '.postitle', function() {
	$('.pmarked').removeClass('pmarked');
	$(this).addClass('pmarked');
	givemestuff();
});
.postitle{
cursor:pointer;
}

.pmarked{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='postitle' data-auth='earth'>lorem ipsum</div>
<div class='postitle' data-auth='moon'>lorem ipsum</div>
<div class='postitle' data-auth='sun'>lorem ipsum</div>
<br>
<select id='selauth'>
<option>moon</option>
<option>sun</option>
</select>

答案 2 :(得分:0)

您可以尝试对下面的代码进行很小的更改。

所做的更改-

  1. 在函数Givemestuff()中,请勿删除$(。optemp)。除掉 仅限课程。
  2. 在同一功能的else部分下,将auth推入名称 数组。

使用此代码,您可以随意在 select 元素下仅添加必需的 option

让我知道进一步的查询。

var names = [];
$(document).ready(function(){
    $('#selauth option').each(function(){
        names.push($(this).text());
    });
});

function givemefirst() {
    $('.pmarked').removeClass('pmarked');
    $('.postitle').eq(0).addClass('pmarked');
    givemestuff();
}

givemefirst();

function givemestuff() {
    let obj = $('.pmarked');
        $('.optemp').removeClass('optemp');
    let auth = obj.attr('data-auth');
    if (names.includes(auth)) {
        $('#selauth').val(auth);
    }
    else {
        $('#selauth').append("<option class='optemp'>" + auth + "</option>");
        $('#selauth').val(auth);
                names.push(auth);
    }
}

$(document).on('click', '.postitle', function() {
    $('.pmarked').removeClass('pmarked');
    $(this).addClass('pmarked');
    givemestuff();
});
.postitle{
cursor:pointer;
}

.pmarked{
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='postitle' data-auth='earth'>lorem ipsum</div>
<div class='postitle' data-auth='moon'>lorem ipsum</div>
<div class='postitle' data-auth='sun'>lorem ipsum</div>
<br>
<select id='selauth'>
<option>moon</option>
<option>sun</option>
</select>