2015-08-13 6 views
3

SVG Привет, ребята, моя проблема довольно простой, но это не работает бог знает почемуСкрыть и показать DIV OnClick

<polygon id="triangle" fill="none" stroke="#EB9381" stroke-miterlimit="10" points="66.233,110.916 114.721,83 66.233,55.083 "/> 
<g id="rectangle"> 
    <rect x="90.908" y="64.82" fill="none" stroke="#EB9381" stroke-miterlimit="10" width="5" height="38" /> 
    <rect x="71.908" y="64.82" fill="none" stroke="#EB9381" stroke-miterlimit="10" width="5" height="38"/> 
</g> 

Вот мой JQuery, что я пытаюсь сделать, в основном скрывается треугольник идентификатор = «треугольник» при щелчке и показывая прямоугольник. Я попытался с эффектом зависания, и он работает. Но с опцией щелчка нет, я не знаю, почему ...

function hoverplayer() 
{ 
    $('#rectangle').hide(); 
    $('#cercle_tourne').click(
     function() 
     { 
      $('#triangle').hide(); 
     }, 
     function() 
     { 
      $('#rectangle').show(); 
     } 
    ); 
} 

Я новичок с JQuery, и Javascript тоже на самом деле, так что я мог бы сделать что-то неправильно.

+1

'hoverplayer()' когда и как вы вызываете эту функцию? – RRK

+0

Точка для заметки - 'polygon' не является ** закрывающим тегом **, поэтому, если его закрыть, он будет отображать элемент' # rectangle' внутри него. поэтому закройте его, используя '', иначе все, что вы пытаетесь« скрыть »или« показать », не будет работать должным образом. –

+0

-' $ ('# cercle_tourne') 'typo? или у вас есть элемент с id 'cercle_tourne'? –

ответ

1

Вы можете попробовать ниже! Но убедитесь, что «cercle_tourne» - это контейнер или кнопка. И по щелчку на нем будет отображаться элемент управления (треугольник), а при втором нажатии он скроет его.

$('#cercle_tourne').click(function(){ 
    if($('#triangle').css('display') == 'none'){ 
     $('#triangle').show(); 
    }else{ 
     $('#triangle').hide(); 
    } 
}); 

Надеюсь, что это поможет.

+0

отлично работает! Я имею в виду, что треугольник действительно показывает! Проблема в том, что прямоугольник всегда отображается, когда я хочу, чтобы он отображался только при скрытии треугольника! как это сделать? - изменить! Я только что добавил две строки для прямоугольника, и он отлично работает! спасибо, ребята, за помощь! :) –

+0

Добавить $ ('# rectangle'). Hide(); внутри условия if и else добавить $ ('# rectangle'). show(); Но он будет работать в соответствии с отображением треугольника ... – Padmanaban

1

Вы хотите переключить ту, которая просматривается с помощью кнопки? Да, конечно

$('.yourButton').click(function(event){ 
    event.preventDefault();//incase you're using an anchor 
    if($('#triangle').css('display')=='block'){//check if triangle is showing 
     $('#triangle').hide(); 
     $('rectangle').show(); 
    }else{ 
     $('#triangle').show(); 
     $('#rectangle').hide(); 
    } 
}); 
+0

не должно быть '.css ('display') ==" block "'? –

+0

вы указали точку, но вы должны реализовать ее в код OPs –

+0

ничего не происходит действительно ... –

0

Вы можете попробовать этот.

CSS:

.hide{ 
    display:none !important; 
} 

JavaScript:

$('#cercle_tourne').click(function(){ 
    if($('#triangle').hasClass('hide')) 
    { 
     $('#triangle').removeClass('hide'); 
    } 
    else 
    { 
     $('#triangle').addClass('hide'); 
    } 

}); 

Вы можете добавить свои собственные условия, зависит от вашего сценария

Смежные вопросы