Jquery не скрывает DIV с переменной - PullRequest
Новая
       6

Jquery не скрывает DIV с переменной

0 голосов
/ 28 июля 2011

Создание меню JQUERY на основе HOVER. Когда пользователь наводит курсор мыши на идентификатор TYPO, он извлекает номер идентификатора TYPO и передает его идентификатору CAT. Поэтому, если я наведу DIV ID = TYPO2, он должен отобразить DIV ID = CAT2. Это прекрасно работает, за исключением того, что я хочу скрыть CAT, когда мышь уходит, и не работает, если я не объявлю снова и не повторю переменную catId в HOVER OUT. Есть ли еще более эффективный способ для этого?

Заранее спасибо

КОД: 

<script> 
$(document).ready(function() {  
$("#cat1, #cat2, #cat3").hide();

$("#typo1, #typo2, #typo3").hover(function(){
var catId = $(this).attr('id');
catId = catId.substring(4,5);
$("#cat"+catId).show("fast")
},
function(){
var catId = $(this).attr('id');
catId = catId.substring(4,5);
$("#cat"+catId).hide("fast")
});
 }); 
</script>
    <div id="container">
    <div id="typo">
        <div id="typo1" class="typo">Typo1</div>
        <div id="typo2" class="typo">Typo2</div>
        <div id="typo3" class="typo">Typo3</div>
    </div>
    <div class="clear"></div>
    <div id="cat">
        <div id="cat1">CAT1</div>
        <div id="cat2">CAT2</div>
        <div id="cat3">CAT3</div>
    </div>
</div>

1 Ответ

0 голосов
/ 28 июля 2011

Если вы используете классы и атрибуты данных, это значительно упрощает задачу: 

<script> 
    $(document).ready(function() {  
        $(".cat").hide();

        $(".typo").hover(function(){
            var catId = $(this).data('id');
            $(".cat[data-id='"+catId+"']").show("fast")
        },
        function(){
            var catId = $(this).data('id');
            $(".cat[data-id='"+catId+"']").hide("fast")
        });
    });
</script>


<div id="container">
    <div id="typo">
        <div data-id="1" class="typo">Typo1</div>
        <div data-id="2" class="typo">Typo2</div>
        <div data-id="3" class="typo">Typo3</div>
    </div>
    <div class="clear"></div>
    <div id="cat">
        <div data-id="1" class="cat">CAT1</div>
        <div data-id="2" class="cat">CAT2</div>
        <div data-id="3" class="cat">CAT3</div>
    </div>
</div>

Теперь вы также можете полностью избавиться от идентификаторов (если не нужно).

...