Скрыть/показать не работает с jQuery (JavaScript)?

Как скрыть/показать html-узел с помощью селекторов jQuery? См. Fiddle here. Цель состоит в том, чтобы скрыть пункт text1, нажав на первую кнопку и скрыть другой текст, нажав на другую кнопку. Теперь узел скрыт, но затем снова появляется. Пожалуйста, объясни?Скрыть/показать не работает с jQuery (JavaScript)?

Вот HTML часть

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="js/test.js"></script> 
</head> 
<body> 
<p id="text1">text1</p> 
<p id="text2">text2</p> 
<form> 
<input type="submit" id="hide1"></input> 
<input type="submit" id="hide2"></input> 
</form> 

</body> 
</html>

и здесь код JavaScript/JQuery:

$(document).ready(function(){ 
    $("#hide1").click(function(){ 
     $("#text1").hide(); 
     $("#text2").show(); 
    }); 
    $("#hide2").click(function(){ 
     $("#text2").hide(); 
     $("#text1").show(); 
    }); 
});

источник

2015-04-21 user1837293

'submit' обычно представляет форму на странице на сервер с помощью метода' HTTP', указанного в форме или 'GET', если вы не указали какой-либо метод. Это обычно приводит к тому, что браузер переходит на страницу «target» или обновляется, если не указана цель.Вот почему скрытый текст возвращается, потому что все сбрасывается, когда вы нажимаете кнопку «отправить». – anu

Несколько вариантов здесь.

Не отправляйте форму. Вы можете выполнить это, не используя кнопки отправки. Чтобы сделать это, установите тип входа в button, а не submit
```
<input type="button" id="hide1" value="hide"> <!-- note: input close tag removed/unnecessary —> 
```
Вы можете также использовать <button> элемент:
```
<button type="button" id="hide1">hide</button> 
```

выполнение Стоп после нажатия кнопки (fiddle). Это может быть достигнуто путем предотвращения действия по умолчанию для события, или возвращение ложных из функции:

$(document).ready(function(){ 
    $("#hide1").click(function(evnt){ // make sure to localize/name the event argument 
     $("#text1").hide(); 
     $("#text2").show(); 
     return false; // or evnt.preventDefault() 
    }); 
    $("#hide2").click(function(evnt){ // make sure to localize/name the event argument 
     $("#text2").hide(); 
     $("#text1").show(); 
     return false; // or evnt.preventDefault() 
    }); 
});

источник

2015-04-21 17:33:10 vol7ron

Изменение type="submit" в type="button". В противном случае он отправляет форму.

источник

2015-04-21 17:26:20

Вы можете либо изменить тип на кнопку, или если у вас есть причина, чтобы сохранить их как представить, вы можете сделать следующее:

$(document).ready(function(){ 
    $("#hide1").click(function(e){ 
     $("#text1").hide(); 
     $("#text2").show(); 
     e.preventDefault(); 
    }); 
    $("#hide2").click(function(e){ 
     $("#text2").hide(); 
     $("#text1").show(); 
     e.preventDefault(); 
    }); 
});

Вы отправляете форму, которая по существу перегружает страницу. e.preventDefault() предотвращает это действие.

источник

2015-04-21 17:27:41 dman2306

Вы используете тег формы в html и используя кнопку типа submit на нем, поэтому он публикует обратную ссылку на страницу, и поэтому вы видите, что метки снова появляются после сообщения , это исправит вашу проблему (смените кнопку type to be button)

<body> 
<p id="text1">text1</p> 
<p id="text2">text2</p> 
<form> 
<input type="button" value='button1' id="hide1"></input> 
<input type="button" value='button2' id="hide2"></input> 
</form> 
</body>

источник

2015-04-21 17:30:17 Aram

По умолчанию поведения кнопки отправки является размещение формы. Таким образом, либо вам нужно использовать метод preventDefault(), либо вы можете вернуть false, чтобы предотвратить сообщение формы, если вы хотите сохранить эту кнопку в качестве кнопки отправки.

$(document).ready(function(){ 
    $("#hide1").click(function(e){ 
     $("#text1").hide(); 
     $("#text2").show(); 
     return false; 
    }); 
    $("#hide2").click(function(e){ 
     $("#text2").hide(); 
     $("#text1").show(); 
     return false; 
    }); 
});

источник

2015-04-21 17:33:32

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

// event.preventDefault(); 
$("#hide1").click(function(event){ 
    event.preventDefault(); 

    // continue 
});

preventDefault() будет предотвратить поведение по умолчанию, который будет вызван, в этом случае: отправка формы.

источник

2015-04-21 17:37:40

Спасибо, все очень полезно! – user1837293

Скрыть/показать не работает с jQuery (JavaScript)?

ответ

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