Альтернатива кратного если другое заявление в JavaScript

Question

Моим вопрос очень похоже на Reduce multiple if else statements

У меня есть несколько, если другое заявление, и я хотел бы использовать JQuery каждую функцию, чтобы сделать код более эффективным, но я могу» t выяснить, как это сделать.

Я запускаю jQuery в Wordpress, который, как я считаю, работает в режиме noconflict, поэтому я не могу получить больше, чем больше (что я считаю) расширенными темами, которые приводят примеры для работы для меня, поскольку я не могу понять правильный синтаксис функции для использования.

Если кто-нибудь может помочь и объяснить, как это сделать для меня, это было бы удивительно. Вот мой код:

var $h6p = $("h6 + p"); 
var $h5p = $("h5 + p"); 
var $h4p = $("h4 + p"); 
var $h3p = $("h3 + p"); 
var $h2p = $("h2 + p"); 
var $h1p = $("h1 + p"); 
var $fullercolor_bg = "rgba(240,234,222,0.9)"; 

if($h1p.mouseIsOver()) { 
    $h1p.prev().css("background-color", $fullercolor_bg); 
} else { 
    $h1p.prev().css("background-color", ""); 
} 
if($h2p.mouseIsOver()) { 
    $h2p.prev().css("background-color", $fullercolor_bg); 
} else { 
    $h2p.prev().css("background-color", ""); 
} 
if($h3p.mouseIsOver()) { 
    $h3p.prev().css("background-color", $fullercolor_bg); 
} else { 
    $h3p.prev().css("background-color", ""); 
} 
if($h4p.mouseIsOver()) { 
    $h4p.prev().css("background-color", $fullercolor_bg); 
} else { 
    $h4p.prev().css("background-color", ""); 
} 
if($h5p.mouseIsOver()) { 
    $h5p.prev().css("background-color", $fullercolor_bg); 
} else { 
    $h5p.prev().css("background-color", ""); 
} 
if($h6p.mouseIsOver()) { 
    $h6p.prev().css("background-color", $fullercolor_bg); 
} else { 
    $h6p.prev().css("background-color", ""); 
} 

(Если CSS был предыдущий примыкающие братьев и сестер селектор я был бы на седьмом небе в этот момент.)

Edit: Спасибо за помощь до сих пор, одна вещь, которую я должен иметь упомянутая пустая установка выражения else преднамерена. Я использовал CSS для таргетинга на селектор, и в нем установлен фоновый цвет, поэтому мне нужно его установить. Не прозрачно.

Answer 1

Вы можете использовать массив:

var $hp = ["h6 + p", "h5 + p", "h4 + p", "h3 + p", "h2 + p", "h1 + p"], 
    $fullercolor_bg = "rgba(240,234,222,0.9)"; 

$hp.forEach(function(v) { 
    if($(v).mouseIsOver()) { 
     $(v).prev().css({ 
      backgroundColor: $fullercolor_bg 
     }); 
    } else { 
     $(v).prev().css({ 
      backgroundColor: "transparent" 
     }); 
    } 
}); 

В вашем случае я думаю, что это проще использовать несколько селекторов CSS в переменной. Это может или не может работать в зависимости от реализации mouseIsOver:

var $hp = $("h6 + p, h5 + p, h4 + p, h3 + p, h2 + p, h1 + p"), 
    $fullercolor_bg = "rgba(240,234,222,0.9)"; 

if($hp.mouseIsOver()) { 
    $hp.prev().css({ 
     backgroundColor: $fullercolor_bg 
    }); 
} else { 
    $hp.prev().css({ 
     backgroundColor: "transparent" 
    }); 
} 

Answer 2

сделать селектор, чтобы получить все элементы в одном объекте JQuery, а затем использовать each method к петле через них:

var $fullercolor_bg = "rgba(240,234,222,0.9)"; 

$("h6 + p,h5 + p,h4 + p,h3 + p,h2 + p,h1 + p").each(function(i, el){ 
    if($(el).mouseIsOver()) { 
    $(el).prev().css("background-color", $fullercolor_bg); 
    } else { 
    $(el).prev().css("background-color", ""); 
    } 
}); 

Или с помощью условного оператора, чтобы выбрать значение:

var $fullercolor_bg = "rgba(240,234,222,0.9)"; 

$("h6 + p,h5 + p,h4 + p,h3 + p,h2 + p,h1 + p").each(function(i, el){ 
    $(el).prev().css("background-color", $(el).mouseIsOver() ? $fullercolor_bg : ""); 
}); 

Answer 3

может быть, вы можете сделать что-то вроде этого, используя селектор :header.

$(':header + p').each(function() { 
    var $this = $(this); 

    $this.prev().css({ 
     backgroundColor: $this.mouseIsOver()? 'rgba(240,234,222,0.9)' : 'transparent' 
    }); 
});