Question

我正在尝试做一些非常简单的事情但不知何故它不起作用。

我右边有4个div，左边有一个空白div。我希望左边的div显示某些文字，这取决于我在右侧徘徊的div。

这很简单，但不知怎的，我错过了什么。

<div class="col-md-6 col-sm-12 col-xs-12 Left">
    <h3>left:</h3>
    <div id="roles">
       <button class="role" id="role_1">
           Role_1
       </button>
       <button class="role" id="role_2">
           Role_2
       </button>
       <button class="role" id="role_3">
           Role_3
       </button>
       <button class="role" id="role_4">
           Role_4
       </button>   
    </div>
</div>
<div class="col-md-6 col-sm-12-col-xs-12 right">
    <div id="right">
    </div>
</div>

这是我的jQuery：

$(function(){
    $('#role_1').hover(function(){
        $('#right').html('<p>Text_1</p>')
    });
     $('#role_2').hover(function(){
        $('#right').html('<p>Text_2</p>')
    });
     $('#role_3').hover(function(){
        $('#right').html('<p>Text_3</p>')
    });
     $('#role_4').hover(function(){
        $('#right').html('<p>Text_4</p>')
    })

})

这只是编写＆＃34; Text＆＃34;的基本代码。当它悬停在＃role_1上时。不知怎的，它不起作用。它适用于JSFiddle

这是我的CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>

编辑：它适用于JSFiddle。不知怎的，它不适用于http://hellosimpletax.com/#/

JSFiddle

谢谢！

Answer 1

检查您的控制台，您会发现错误

未捕获的SyntaxError：意外的标记ILLEGAL

尝试此操作，您只需忘记关闭#roles选择器

$('#roles').mouseleave(function(){ $('#right').html('') }) 
---------^

Working Demo

Answer 2

<强>更新

OP将其代码移动到Angular控制器中，因为@krishna在评论中建议我们注意到该视图未在文档准备好时完全加载。

试试这个：

工作小提琴：http://jsfiddle.net/tracyfu/twsL2fgq/6/

$(function(){
  $('#dev').on('mouseenter', function(){
    $('#right').html('<p>Text_1</p>');
  });
  $('#des').on('mouseenter', function(){
    $('#right').html('<p>Text_2</p>');
  });
  $('#eng').on('mouseenter', function(){
    $('#right').html('<p>Text_3</p>');
  });
  $('#art').on('mouseenter', function(){
    $('#right').html('<p>Text_4</p>');
  })
  $('#roles').on('mouseleave', function(){
    $('#right').html('');
  })     
})

一对无关的旁白：

如果您指定col-md-6，则不应声明col-xs-12，因为Bootstrap会将移动设备视为其基准，如果您使用{{1}，则应自动堆叠您的列}
使用jQuery附加事件处理程序的首选方法是使用on()

使用jQuery将文本添加到div

2 个答案: