Ориентация на конкретные дивы в jQuery

Question

Я уверен, что это довольно простой ответ, но я выдернул свои волосы, пытаясь заставить эту штуку работать.

Я пытаюсь создать кнопку Подробнее нанекоторые текстовые поля.Когда вы нажмете на «Узнать больше», поле должно развернуться вниз и показать больше информации.

Когда я сталкиваюсь с проблемами, фактически заставляет функцию щелчка «узнать больше» соответствовать определенному текстовому полю, рядом с которым ... Он расширяет все текстовые поля, а не тот, который мне нужен.

Там также есть функция для анимации фона с помощью цветового плагина. У меня уже есть эта работа. Просто нацеливание на определенные поля сводит меня с ума.

Я могу добавить функцию щелчкак .bind, но я не могу использовать это для нацеливания.

$(document).ready(function(){
    var service = $(".service"), text = $(".service-text, h1.service-heading"); 

    $('.learn').bind({
    mouseenter: function() {
            $(service).animate({ backgroundColor: "#000000", }, 800);
            $(text).animate({ color: "#FFFFFF", }, 800);
        },
    mouseleave: function() {
            $(service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $(text).animate({ color: "#000000", }, 800);
        }
    });
});

ОБНОВЛЕНИЕ:

Вот HTML-код, который я использую

<div class="service box-round">
<h1 class="service-heading">WEB DEVELOPMENT</h1>
    <div class="service-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="more-info">...Click for more info</span></div>
    <div class="more-text">More Text</div>
</div>
            <div class="learn"><span class="more">learn more</span><span class="less">learn less</span></div>

Я думал о том, чтобы использовать функцию прятки для того, чтобы учиться больше и меньше учиться.

Answer 1

Исходя из вашего описания, а не из предоставленного кода, именно так я реализовал ссылку «Показать больше» для расширения / раскрытия текстовых областей ранее. Это должно дать вам представление о том, как вы нацеливаетесь на конкретные <div>, а не на все из них.

HTML

<div class="details">
  Name: John Doe<br>
  Address: 123 Test Drive, Testville
  Postal Code: A1A 1A1
</div>
<a class="detailLink" href="#">Show/Hide Details...</a> 

JQuery

$(function() {  
    $('.detailLink').click(function() {
        $(this).prev('.details').toggle('medium');
        return false;
    });
 });

Таким образом, идея состоит в том, чтобы использовать фактическую ссылку «Подробнее» в качестве точки запуска, а затем использовать функции обхода дерева jQuery, чтобы переключать видимость непосредственно предшествующих деталей <div>.

Answer 2

$('.learn').bind({
mouseenter: function() {
            $(service).animate({ backgroundColor: "#000000", }, 800);
            $(text).animate({ color: "#FFFFFF", }, 800);
},
mouseleave: function() {
            $(service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $(text).animate({ color: "#000000", }, 800);
}  
});

эту часть можно изменить на:

$('.learn').hover(function() {
    service.css({ backgroundColor: "#000000" });
    text.css({ color: "#FFFFFF" });
}, function() {
    service.css({ backgroundColor: "#000"});
    text.css({ color: "#FFFFFF" });
});

почему я не использую animate - потому что jQuery без плагинов не может анимировать фон и цвет текста ввода

Обновление:

Я не знаю, если это то, что вы ищете, но: http://jsfiddle.net/DJLZC/7/

Answer 3

$(document).ready(function(){
    $service = $(".service");
    $text = $(".service-text, h1.service-heading"); 

    $('.learn').bind({
    mouseenter: function() {
            $($service).animate({ backgroundColor: "#000000", }, 800);
            $($text).animate({ color: "#FFFFFF", }, 800);
        },
    mouseleave: function() {
            $($service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $($text).animate({ color: "#000000", }, 800);
        }
    });
});

Answer 4

Вы можете попытаться разрешить ссылке кнопки «Узнать больше» ссылку на хеш, которая нацелена на конкретный div, а затем использовать плагины jQuery для перехвата вызова и расширения целевого div.

Примером может быть div вроде:

<div id="example-using-vars">
    <h3>Using Variables in ...</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

, а затем вызвать его с гиперссылкой, например

<a href="#example-using-vars">Learn more</a>