从我的下拉菜单中选择“#id”后，如何设置“#id”的样式？答案

【问题标题】：How to style an `#id` after selecting that `#id` from my dropdown menu?从我的下拉菜单中选择“#id”后，如何设置“#id”的样式？
【发布时间】：2015-01-13 03:59:48
【问题描述】：

详情

我有一个国家下拉菜单
每个国家/地区都有其名称的 id。前任。澳大利亚 - id="Australia"
当我选择它们时，它们将重定向/放大到该国家/地区。
到目前为止它的工作，但有点难以分辨我刚刚点击了哪个国家。
所以现在，我想将border 申请到我的class="country-name"
这是我的下拉列表

如您所见，我在 Australia 上选择了，那么我的 HTML 应该是这样的

<h5 id="Australiaia" class="country-name" >Australia</h5>

然后，我的视图应该重定向我到

这就是我想做的，我想把澳大利亚的边界放在视图中。

JSFiddle

【问题讨论】：

请显示几个实物期权元素而不是 PHP 代码。
我在上面。谢谢。
您想为特定元素或该类的所有内容设置样式吗？如果是后者，只需在页面中添加一些 CSS：stackoverflow.com/a/1720483/483371
嗯...实际上我可以猜到，现在的问题是，当用户选择某些内容时，您会立即重定向。
@Teemu：你是对的。我直接重定向到国家名称，我想设置该国家名称的样式......

标签： javascript jquery html css

【解决方案1】：

在你的 CSS 中添加一个目标选择器：

.country-name:target { font-weight: bold; color: red; }

【讨论】：

让我试试。谢谢。
如果我想让它看起来像一个亮点，你知道怎么做吗？
高亮到底是什么意思？这是一个常规选择器，您可以在其上使用任何 CSS。虽然我建议将 ID 添加到整个国家/地区容器中，但这样，您可以跳转到容器并用彩色背景或其他东西突出显示它。像这样：<div id="austria" class="country"></div>
是的，我想我应该这样做。你是对的。添加ID to the whole country container
这样，您仍然可以使用.country:target h5 { font-weight: bold; color: red; } 设置h5 的样式

【解决方案2】：

首先，您可以阅读 jQuery 文档。这就是你的代码应该是什么样子的。

$('.country_name').click(function () {

    $(this).toggleClass('yourclass');

    });

【讨论】：

嗯.. 这不是我想要的。
这些答案都不是，这些人还没有阅读代码； )。

【解决方案3】：

也许你应该学习如何发布代码，因为在 'html' 下包含每种语言的 jfiddle 并不能完全帮助任何人，也没有人想挖掘你所有的行来试图弄清楚你到底有什么继续，但话虽如此...我会告诉您您将要做什么的基本步骤...

检测选择的变化，获取这个值。
找到具有该值的 h5，给它一个类。
滚动到您所在国家/地区的 ID。

【讨论】：

【解决方案4】：

我在您的代码中注意到了几件事。

首先你不应该有一个元素的id，这是非常糟糕的做法。

其次，在您想通过 jquery 或 javascript 更改或操作的 element 上使用 class 总是一个好主意。这要容易得多。正如我注意到的那样，您没有戴上任何父母包裹您的h5 标签

无论如何，这是一个解决方案

为你的边框使用一个 CSS 类

.border-country{border:solid red 1px;}

并修改您的 jquery 代码

var lastElem=null;
$('#state').on('change',function(event){
var state= $(this).val();
    // remove already existing borders on any country lists
    $(lastElem).parent().parent().removeClass('border-country');    

    // add your own class
    $(state).parent().parent().addClass('border-country');
    // save current element in your lastElem variable and you can remove border when firing the second or so on events
    lastElem=$(state);

});

我使用 parent() 函数是因为我在观察中提到的第二点，您可以通过在包装 h5 标记的父元素上放置一个模拟类来避免这种情况。

如果你使用了一个类，我们可以简单地使用

$('yourclass').removeClass('.border-country'); 
$('yourclass').addClass('.border-country');

希望这会有所帮助，这应该会奏效！

谢谢

【讨论】：

【解决方案5】：

您可以在 CSS 文件中设置元素的样式：

.country-name{color: red;}

或者，如果您必须在 jQuery 中执行此操作，您可以执行以下操作：

$(document).ready(function(){
    $(".country-name").css("color", "red");
})

【讨论】：

【解决方案6】：

 $('.country_name').on('click', function() {
      $(this).css('border', '1px solid red');
 }

例如。

【讨论】：

不生效！
再次，我想为only 设置我从下拉菜单中选择的国家/地区。