从我的下拉菜单中选择`#id`后如何设置`#id`样式？

Question

详细

• 我有一个国家/地区的下拉菜单
• 每个国家/地区都有其名称的ID。防爆。澳大利亚 - id="Australia"
• 当我选择它们时，它们会重定向/放大到该国家。
• 到目前为止这是有效的，但是我很难分辨出我刚刚点击的国家/地区。
• 现在，我想将border应用于我的class="country-name"
• 这是我的下拉列表

正如您所看到的，我在Australia上选择了我的HTML应该是这样的

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

然后，我的观点应该重新引导我

这是我想要做的，我想在视图中将边框放到澳大利亚。

JSFiddle

Answer 1

将目标选择器添加到css：

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

Answer 2

一开始你可以阅读jQuery文档。这就是你的代码应该是什么样的。

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

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

    });

Answer 3

也许你应该学习如何发布代码，因为在＆＃39; html＆＃39;中包含一个jfiddle与每种语言。并没有任何人想要帮助任何人，也没有人想要挖掘你所有的线条，试图找出你到底发生了什么，但是说了......我会告诉你你的基本步骤＆＃ 39;将要做...

1. 检测选择更改，获取此值。
2. 找到具有该值的h5，给它一个类。
3. 滚动至您所在国家/地区的ID。

Answer 4

我在代码中注意到了一些事情。

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

其次，在class上使用element总是一个好主意，你想通过jquery或javascript来改变或操纵它。这更容易。我注意到你没有把任何父母包裹在你的h5标签上

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

为边框使用css类

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

AND修改您的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标记的父元素上放置一个mock类来避免这种情况。

如果您使用过课程，我们可以简单地使用

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

希望这有帮助，这应该有效！

THX

Answer 5

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

.country-name{color: red;}

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

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

Answer 6

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

例如。