#javascript #jquery #css #locale #aspdotnetstorefront
#javascript #jquery #css #язык #aspdotnetstorefront
Вопрос:
Мне нужно написать некоторый jquery, который будет считывать текущее значение в выпадающем списке, а затем скрывает конкретную ссылку на странице.
Выпадающий список является селектором локали. Поэтому, когда я выбираю «английский», я хочу, чтобы ссылка была скрыта, но при выборе французского языка ссылка должна оставаться.
Можете ли вы показать, как я могу это сделать? Я хочу изучить это. Спасибо
Ответ №1:
Как насчет этого:
function handleLang() {
if ($('#select').val() == 'en') {
$('#link').hide();
} else {
$('#link').show();
}
}
$(function() {
// hide/show on load
handleLang();
// hide/show when the language is changed (useful if the page doesn't reload)
$('#select').change(handleLang);
});
Комментарии:
1. Похоже, это работает, НО моему li не присвоен класс.. Как мне проверить наличие конкретной ссылки: jsfiddle.net/jqJUn
2. Вот обновление того, что я имею в виду, я думаю, мне нужно проверить наличие конкретной ссылки. jsfiddle.net/jqJUn/1
3. jsfiddle.net/jqJUn/2 — Я обновил ваш пример, чтобы скрыть определенную ссылку. Это нормально?
Ответ №2:
Основываясь на первом ответе, предоставленном на этот вопрос, и дополнительных подсказках, предоставленных автором первого ответа в комментариях, вот окончательная (и компактная) полная версия кода, который работал для меня (я также удалил и стиль, поскольку больше не требовался). Это главная страница, представленная в index.html.erb для этого тестового приложения.
<h2 id='main_header'>Showing/hiding link based on dropdown selection</h2>
<table>
<thead>
<th>Action</th>
<th>Skip assessment</th>
<th>Reason for skipping</th>
</thead>
<tbody>
<tr>
<td>
<%= link_to 'Start asseement', url_for(controller: :home, action: :start_assessment), id: 'start_assessment' %>
</td>
<td>
<%= select_tag "skip_option", options_for_select([ "Yes", "No" ], "No"), id: "skip_option", onchange: "reason_picker()" %>
</td>
<td>
<%= text_field_tag "reason_for_skipping", nil, size: 50, placeholder: 'Enter reason here...' %>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready (
window.reason_picker = function () {
var selected = document.getElementById("skip_option").selectedIndex;
if (selected == 0) {
$("#reason_for_skipping").show();
$("#start_assessment").hide();
}
else {
$("#reason_for_skipping").hide();
$("#start_assessment").show();
}
}
);
</script>
Начальная страница оценки очень простая, просто заголовок и обратная ссылка на главную страницу, содержащаяся в файле start_assessment.html.erb:
<h1>Assessment</h1>
<%= link_to 'Back', :back %>
Если это поможет, вот файл controller home_controller.rb:
class HomeController < ApplicationController
def index
end
def start_assessment
end
end
И файл route.rb маршрута:
Rails.application.routes.draw do
root controller: 'home', action: :index
get 'start_assessment' => 'home#start_assessment'
end