Question

每次调用它时如何在不重新加载页面的情况下执行函数并根据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'); }
}

Answer 1

您的功能中发生了分配而不是比较，因此您永远无法获得您期望的结果。试试这个：

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

Answer 2

这可能就是你想要的！

$("#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);
  }
}

每次条件为真时执行一个函数而不重新加载页面

2 个答案: