@alevtina_grochenko

Как сделать редактируемую ссылку?

Есть задача сделать ссылку рядом с которой будет стоять кнопка, которая в зависимости от нажатия будет становиться либо кнопкой редактирования (и при этом значение ссылки можно изменить), либо кнопкой сохранения (значение ссылки сохраняется)
У меня есть мысль о том, как это реализовать, а именно:
Сделать блок ссылки и блок input type="text", один из которых будет скрываться и появляться в зависимости от ситуации
Например, изначально будет показана ссылка, при клике на кнопку редактирования, блок с ссылкой будет скрываться и появляется инпут. Его значения редактируется и при нажатии на кнопку редактирования/cохранения скрывается инпут и его значение передаётся в ссылку, и так много раз
Есть ли вариант реализовать это лучше и проще? Кроме этого никакие варианты в голову не лезут, да и этот не особо понятно, как правильнее всего реализовывать.
Там обязательно должен стоять инпут и обязательно должна быть ссылка.
И не совсем понятно, как поменять значения кнопки редактирования/сохранения, она должна быть единой
  • Вопрос задан
  • 209 просмотров
Решения вопроса 1
bubandos
@bubandos
bash'у, javascript'ую, php'лю, css'аю, html'каю
все правильно, ссылка, исчезающий инпут и кнопка.
С кнопкой поступают так: Инициализируют состояние (так как тут только два состояния, то подойдет булева переменная btnState) и в обработчике по клику на кнопку выполняют нужное действие:
if (btnState) {
    // показываем инпут, заменяем текст кнопки на "сохранить"
} else {
    //прячем инпут, заменяем у ссылки href, показываем ссылку
}; 
btnState = !btnState; // (инвертируем состояние кнопки)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
402d
@402d
начинал с бейсика на УКНЦ в 1988
https://vitalets.github.io/bootstrap-editable/
внешне работает немного не так как вы описали.
Изучите исходный код https://github.com/vitalets/bootstrap-editable/blo...
Многому научитесь
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы