JQuery, выбрав href с * =

Question

На моем веб-сайте есть основное изображение, которое изменяется в зависимости от того, какие эскизы вы нажимаете. Для определенного основного изображения я хочу, чтобы текст был специфическим для этого изображения для заполнения. Текст начинается как отображение: none; и затем я обнаружил это с помощью .show() ;. Кажется, что ничего не происходит с моим кодом, поэтому любая помощь будет высоко оценена. JQuery является:

$(document).ready(function() { 
jQuery.fn.exists = function() { 
    return this.length > 0; 
}; 
if ($("div.bigimage a[href*='karina']").exists()) { 
    $("ul li.karina").show(); 
    $("ul li.natalia").hide(); 
    $("ul li.celeste").hide(); 
} 
else if ($("div.bigimage a[href*='natalia']").exists()) { 
    $("ul li.karina").hide(); 
    $("ul li.natalia").show(); 
    $("ul li.celeste").hide(); 
} 
else if ($("div.bigimage a[href*='celeste']").exists()) { 
    $("ul li.karina").hide(); 
    $("ul li.natalia").hide(); 
    $("ul li.celeste").show(); 
} 
else { 
    $("ul li.karina").hide(); 
    $("ul li.natalia").hide(); 
    $("ul li.celeste").hide(); 
} 

});

HTML, он пытается выбрать это:

​<div class="bigimage"> 
<li> 
<a href="http://cdn.shopify.com/s/files/1/0103/5102/products/Natalia_1024x1024_IMG_5760.jpg?4679">picture here</a></li> 
</div> 

<ul> 
<li id="model-name" class="karina">Karina is 5'7" and is wearing a size 34 C/D Regular</li> 
      <li id="model-name" class="celeste">Celeste is 5'8" and is wearing a size 34 C/D Regular</li> 
      <li id="model-name" class="natalia">Natalia is 5'10" and is wearing a size 34 A/B Tall</li> 
</ul>​​​​​​ 

Answer 1

Ваша проблема возникает из-за чувствительности к регистру: вы ищете natalia, но URL-адрес ссылки содержит Natalia. Существует также гораздо более короткий способ написать код:

$("ul li").hide(); // hide all 
var url = $("div.bigimage a")[0].href; 
if (url.indexOf("Karina") > -1) { 
    $("ul li.karina").show(); 
} 
else if (url.indexOf("Natalia") > -1) { 
    $("ul li.natalia").show(); 
} 
else if (url.indexOf("Celeste") > -1) { 
    $("ul li.celeste").show(); 
} 

Answer 2

Вызов JQuery с селектором не возвращает логическое значение, она возвращает набор согласованных элементов.

Таким образом, вместо того, чтобы испытывать что-то вроде:

if ($("div.bigimage a[href*='karina']") === true) { 
... 
} 

Вы можете проверить размер коллекции, возвращаемой JQuery:

if ($("div.bigimage a[href*='karina']").length > 0) { 
... 
} 

Больше информации здесь: http://api.jquery.com/jQuery/

Answer 3

Добавить этот маленький функция для jQuery

jQuery.fn.exists = function(){return this.length>0;}

И тогда вы можете проверить с

if ($("div.bigimage a[href*='karina']").exists()) {...}

Решение здесь Is there an "exists" function for jQuery?

Answer 4

может быть, вы можете попробовать использовать String.match заявление.

как

if ($("div.bigimage a").attr('href').match("karina")) { 
//some action here 
    } 

$("div.bigimage a").attr('href') возвратит строку и .match бы найти :)

Это просто идея в случае, если вы могли бы найти его проще.