每次条件为真时执行一个函数，无需重新加载页面

Execute a function everytime a condition is true without reloading the page

本文关键字：新加载 加载 函数 一个 执行 条件      更新时间：2023-09-26

我怎么能执行一个函数，每次我调用它而不重新加载页面，并根据id从它得到不同的值?

Html代码:

<a href="#" id="next"> click here </a>
jQuery代码: 
$("#next").click(function() {
    var div1vis = $(".left-div .info-left-div").filter(':visible'), 
        div2vis = $(".right-div .info-right-div").filter(':visible');
    var id = jQuery(this).attr("id");
    if (div1vis.next().length > 0 && div2vis.next().length > 0) {
        var nextid = div1vis.next().attr("id");
        changebackground(nextid);
        div1vis.next().show().prev().hide();
        div2vis.next().show().prev().hide();
    }
});
function changebackground(divid) {   
    if (divid = '#left-info1') { $("body").css('background-color', '#ebb614'); } 
    if (divid = '#left-info2') { $("body").css('background-color', '#acb7a8'); } 
    if (divid = '#left-info3') { $("body").css('background-color', '#4f795b'); } 
    if (divid = '#left-info4') { $("body").css('background-color', '#7f7a6e'); } 
    if (divid = '#left-info5') { $("body").css('background-color', '#4a87a2'); } 
    if (divid = '#left-info6') { $("body").css('background-color', '#121929');} 
    if (divid = '#left-info7') { $("body").css('background-color', '#1b5367'); } 
    if (divid = '#left-info8') { $("body").css('background-color', '#13192e'); }
}

这可能就是你想要的!

$("#next").click(function() {
  var div1vis = $(".left-div .info-left-div").filter(':visible'),
      div2vis = $(".right-div .info-right-div").filter(':visible');
  var id = jQuery(this).attr("id");
  if (   div1vis.next('.left-div .info-left-div').length > 0 
      && div2vis.next('.right-div .info-right-div').length > 0 ) {
    var nextid = div1vis.next('.left-div .info-left-div').attr("id");
    changebackground(nextid);
    div1vis.next().show().prev().hide();
    div2vis.next().show().prev().hide();
  }
});

function changebackground(divid) {
  var colors = {
    'left-info1': '#ebb614',
    'left-info2': '#acb7a8',
    'left-info3': '#4f795b',
    'left-info4': '#7f7a6e',
    'left-info5': '#4a87a2',
    'left-info6': '#121929',
    'left-info7': '#1b5367',
    'left-info8': '#13192e',
  };
  var curColor = colors[divid];
  if (curColor) {
    //$('#' + divid).show();
    $("body").css('background-color', curColor);
  }
}

你有分配发生在你的函数而不是比较，所以你永远不会得到你所期望的结果。试试这个:

function changebackground(divid) {   
    if (divid == '#left-info1') { $("body").css('background-color', '#ebb614'); } 
    if (divid == '#left-info2') { $("body").css('background-color', '#acb7a8'); } 
    if (divid == '#left-info3') { $("body").css('background-color', '#4f795b'); } 
    if (divid == '#left-info4') { $("body").css('background-color', '#7f7a6e'); } 
    if (divid == '#left-info5') { $("body").css('background-color', '#4a87a2'); } 
    if (divid == '#left-info6') { $("body").css('background-color', '#121929');} 
    if (divid == '#left-info7') { $("body").css('background-color', '#1b5367'); } 
    if (divid == '#left-info8') { $("body").css('background-color', '#13192e'); }
}
相关文章：