Question

我正在为学校项目制定时间表。我们的想法是，当悬停在元素上时，将显示该年份的描述。我要做的是创建一个代码，将活动元素的ID转换为应该显示的元素的ID。到目前为止我所拥有的是：

<div class='timeline-element' id='year-1492'>
            <p>1492</p>
        </div>
        <div class='timeline-element' id='year-1607'>
            <p>1607</p>
        </div>
        <div class='timeline-element' id='year-1620'>
            <p>1620</p>
        </div>

再过30年。

什么是激活：

<div class='timeline-info-panels'>
        <div class='timeline-info' id='1492'>
            <p>1492 info</p>
        </div>
        <div class='timeline-info' id='1607'>
            <p>1607 info</p>
        </div>
        <div class='timeline-info' id='1620'>
            <p>1620 info</p>
        </div>
</div>

以及另外30个信息面板

jQuery：

$('.timeline-element').hover(function(){


    $(this).addClass('hover-over-time-pill')
    $('.timeline-info-panels').show();

    var hoverID=$(this).attr("id");
    var newID=$(hoverID).replace('year-', ' ')
    $('#'+newID).show();
},
function(){
    $('.timeline-info').hide();
    $('.timeline-info-panels').hide();
    $(this).removeClass('hover-over-time-pill');
    $('#'+newID).hide();
    });

这不起作用，我不知道该怎么做，因为我对HTML和jQuery很新。所以基本上，问题是：我该怎么做？

Answer 1

你能成为FIDDLE吗？

第一个问题是代码中的空格。

var newID=$(hoverID).replace('year-', ' ')
$('#'+newID).show();

newID会像" test"一样讨厌。因此，$('#'+newID)会抛出错误，因为没有"# test"元素，只有#test。

第二个......你能提供更多代码吗？像.timeline-info-panels例如

编辑：

制作了一个FIDDLE并修复了JS代码中的一些错误。

e.g。 hoverID已经是一个字符串，所以你写这一行：

var newID = $(hoverID).replace('year-', ' ')

像这样：

var newID = hoverID.replace('year-', '')

Answer 2

三个问题：

替换功能中的空格会为您提供错误的ID（" 1942"与"1942"）
newID未在“unhover”回调函数中定义 - 要么将变量向上移动范围，要么重新定义它（我做了后者）
var newID = $(hoverID).replace('year-', '') - $(hoverID)应该只是hoverID，因为您已经提取了ID字符串，并且不再需要jQuery对象

这是一个工作版本，其中包含上述三个问题：

    $('.timeline-element').hover(function(){
        
        $(this).addClass('hover-over-time-pill')
        $('.timeline-info-panels').show();
    
        var hoverID=$(this).attr("id");
        var newID = hoverID.replace('year-', ''); // THIS IS FIXED
        $('#'+newID).show();
    },
    function(){
        $('.timeline-info').hide();
        $('.timeline-info-panels').hide();
        $(this).removeClass('hover-over-time-pill');

        var hoverID=$(this).attr("id");           // THIS IS ADDED
        var newID = hoverID.replace('year-', ''); // THIS IS ADDED
        $('#'+newID).hide();
    });

.timeline-info {
  display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='timeline-element' id='year-1492'>
            <p>1492</p>
        </div>
        <div class='timeline-element' id='year-1607'>
            <p>1607</p>
        </div>
        <div class='timeline-element' id='year-1620'>
            <p>1620</p>
        </div>


<div class='timeline-info-panels'>
        <div class='timeline-info' id='1492'>
            <p>1492 info</p>
        </div>
        <div class='timeline-info' id='1607'>
            <p>1607 info</p>
        </div>
        <div class='timeline-info' id='1620'>
            <p>1620 info</p>
        </div>
</div>

奖金

不确定替换ID是否属于您的任务的一部分，但是如果您将ID直接与其他内容匹配（我使用了一个类，但使用data-*属性也很好），请查看它是否更容易获得：

$('.timeline-element').hover(function(){
        $('.'+ $(this).attr('id') ).show();
    },
    function(){
        $('.'+ $(this).attr('id') ).hide();
    });

.timeline-info {
  display: none;
  padding: 10px;
  background: #eee;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='timeline-element' id='year-1492'>
            <p>1492</p>
        </div>
        <div class='timeline-element' id='year-1607'>
            <p>1607</p>
        </div>
        <div class='timeline-element' id='year-1620'>
            <p>1620</p>
        </div>


<div class='timeline-info-panels'>
        <div class='timeline-info year-1492'>
            <p>1492 info</p>
        </div>
        <div class='timeline-info year-1607'>
            <p>1607 info</p>
        </div>
        <div class='timeline-info year-1620'>
            <p>1620 info</p>
        </div>
</div>

Answer 3

那里有几个问题。

作为Dev Vampyr highlighted，您的代码正在用空格替换ID中的year-，因此当您查找元素时，您的CSS选择器无效（它看起来像{ {1}}而不是# 1234）。
CSS ID选择器不能以数字开头（即使HTML中的#1234属性可以），因此id也无效。 jQuery容忍它们，只要它们是独立的（例如，#1234可以工作但$("#1234")没有），但这不是一个记录的功能，因此可能随时消失。虽然可以逃避选择器使其有效，但这很痛苦，所以最好不要使用以数字开头的$("#1234 div")。
id是第一个函数中的局部变量，在第二个函数中无法访问它。

所以我可能会更改HTML，以便newID以字母开头，例如id：

然后更新代码不使用空格，而是添加<div class='timeline-info-panels'> <div class='timeline-info' id='t1492'> <p>1492 info</p> </div> <div class='timeline-info' id='t1607'> <p>1607 info</p> </div> <div class='timeline-info' id='t1620'> <p>1620 info</p> </div> </div>：

你真的不需要$('.timeline-element').hover(function() { $(this).addClass('hover-over-time-pill'); $('.timeline-info-panels').show(); var hoverID = this.id; // `$(this).attr("id")` is just a long way of doing `this.id` var newID = $(hoverID).replace('year-', 't') $('#' + newID).show(); }, function() { $('.timeline-info').hide(); $('.timeline-info-panels').hide(); $(this).removeClass('hover-over-time-pill');; var hoverID = this.id; var newID = $(hoverID).replace('year-', 't') $('#' + newID).hide(); } );，因为你以后要将它与replace结合起来，所以你可以使用#，我们可以压缩那个逻辑位：

substring

旁注：我看到你在开始悬停时向悬停元素添加一个类，然后在停止悬停时将其删除。没有必要;相反，在您的CSS中，只需将规则与$('.timeline-element').hover(function() { $(this).addClass('hover-over-time-pill'); $('.timeline-info-panels').show(); $('#t' + this.id.substring(5)).show(); }, function() { $('.timeline-info').hide(); $('.timeline-info-panels').hide(); $(this).removeClass('hover-over-time-pill');; $('#t' + this.id.substring(5)).hide(); } );相关联，然后让浏览器为您处理。

如何从活动元素获取ID，并将其更改为与另一个ID匹配？

3 个答案: