Question

我已经可以在我的脚本中隐藏/显示元素，但不是正确的。每个元素都有一个唯一的数据属性。我还给了他们一个ID来重新组合同一个变量中的所有元素。但是当我同意记录名为＆＃34; roleId＆＃34;的var时，它将仅输出第一个数据属性元素，这就是为什么我的鼠标悬停事件仅适用于第一个项目，如上所示：

HTML：

<div id="#role" data-role="1">
  <span class="default">Default Content</span>
  <span class="mouseover-content hidden">Mouseover Content</span>
</div>

<div id="#role" data-role="2">
  <span class="default">Default Content 2</span>
  <span class="mouseover-content hidden">Mouseover Content 2</span>
</div>

<div id="#role" data-role="1">
  <span class="default">Default Content</span>
  <span class="mouseover-content hidden">Mouseover Content</span>
</div>

<div id="#role" data-role="3">
  <span class="default">Default Content 3</span>
  <span class="mouseover-content hidden">Mouseover Content 3</span>
</div>

JS：

var role = $('*#role');

role.mouseover(function(){
  roleId = role.attr('data-role');
  console.log(roleId); // Will output 1
  var roleHash = $('[data-role="' + roleId + '"]');
  roleHash.find('.default-content').addClass('hidden');
  roleHash.find('.mouseover-content').removeClass('hidden');
});

感谢任何帮助。

Answer 1

而不是重复Id's使用类说role，然后尝试：

var roles = $('.role');
roles.mouseover(function(){ 
    roleId = $(this).attr('data-role'); //use $(this)
    console.log(roleId); 
    //var roleHash = $('[data-role="' + roleId + '"]'); //no need
    $(this).find('.default-content').addClass('hidden'); //use $(this)
    $(this).find('.mouseover-content').removeClass('hidden'); //use $(this)
});

DEMO

Answer 2

您应该使用一个类，并且您在html中使用了#id，这是不正确的。

使用类的HTML将是这样的：

<div class="role" data-role="1">
  <span class="default">Default Content</span>
  <span class="mouseover-content hidden">Mouseover Content</span>
</div>

<div class="role" data-role="2">
  <span class="default">Default Content 2</span>
  <span class="mouseover-content hidden">Mouseover Content 2</span>
</div>

<div class="role" data-role="1">
  <span class="default">Default Content</span>
  <span class="mouseover-content hidden">Mouseover Content</span>
</div>

<div class="role" data-role="3">
  <span class="default">Default Content 3</span>
  <span class="mouseover-content hidden">Mouseover Content 3</span>
</div>

你的jQuery代码将是：

$('.role').mouseover(function(){ 
    roleId = $(this).data('role');//use jquery data API 
    console.info(roleId); 

    //uninitialize mouseover effect so that if someone mouseovered on a .role before it should show like default
    $('.role').each(function(index){
         $(this).find('.default-content').removeClass('hidden');
         $(this).find('.mouseover-content').addClass('hidden');
    });


    $(this).find('.default-content').addClass('hidden');
    $(this).find('.mouseover-content').removeClass('hidden');
});

＆＃13;

$('.role').mouseover(function(){ 
            roleId = $(this).data('role');//use jquery data API 
            console.info(roleId); 

            //uninitialize mouseover effect so that if someone mouseovered on a .role before it should show like default
            $('.role').each(function(index){
                 $(this).find('.default-content').removeClass('hidden');
                 $(this).find('.mouseover-content').addClass('hidden');
            });
            
            
            $(this).find('.default-content').addClass('hidden');
            $(this).find('.mouseover-content').removeClass('hidden');
    });

＆＃13;

.hidden{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="role" data-role="1">
          <span class="default">Default Content</span>
          <span class="mouseover-content hidden">Mouseover Content</span>
        </div>
        
        <div class="role" data-role="2">
          <span class="default">Default Content 2</span>
          <span class="mouseover-content hidden">Mouseover Content 2</span>
        </div>
        
        <div class="role" data-role="1">
          <span class="default">Default Content</span>
          <span class="mouseover-content hidden">Mouseover Content</span>
        </div>
        
        <div class="role" data-role="3">
          <span class="default">Default Content 3</span>
          <span class="mouseover-content hidden">Mouseover Content 3</span>
        </div>

＆＃13;

Answer 3

在html中，id必须是唯一的。没有相同的id可以在同一个html文件中，或者会发生奇怪的事情。

而不是使用id="role"，请使用class="role"。并使用类选择器，它在jquery中为$(".role")。它将返回一个元素数组。你可以摆脱data-attribute。 jquery支持数组绑定，因此您可以将相同的函数绑定到数组中的每个元素。

$(".role").mouseover(function() {
    // something
});

Answer 4

Html元素 ID无法从＃开始，请尝试从所有 div标记中删除＃ 并运行该程序。

Answer 5

由于id需要是唯一的，因此您需要更改data-role元素的ID，以便它们不会发生冲突（或使用我在下面执行的数据属性）。

这样的事可能适合你：

<强> HTML

<div data-type="role" data-role="1">
    <span class="default">Default Content</span>
    <span class="mouseover-content hidden">Mouseover Content</span>
</div>

<div data-type="role" data-role="2">
  <span class="default">Default Content 2</span>
  <span class="mouseover-content hidden">Mouseover Content 2</span>
</div>

<div data-type="role" data-role="1">
    <span class="default">Default Content</span>
    <span class="mouseover-content hidden">Mouseover Content</span>
</div>

<div data-type="role" data-role="3">
  <span class="default">Default Content 3</span>
  <span class="mouseover-content hidden">Mouseover Content 3</span>
</div>

<强>的Javascript

var $role = $('[data-type="role"]');  // prefixing vars that are jquery objects with $ is pretty common

$role.mouseover(function(){
  var roleId = $(this).data('role');
  var $roleHash = $('[data-role="' + roleId + '"]');
  $roleHash.find('.default').addClass('hidden');  // there aren't any elements with default-content class
  $roleHash.find('.mouseover-content').removeClass('hidden');
});

如何根据给定的ID隐藏和显示信息

5 个答案: