问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Jquery实现选项卡，我这样写为什么不行

头像
月半小夜曲
    135611

    点击按钮切换文本

    我想循环给li绑定点击事件，然后将文本放在数组中，点击时，替换成和li对应下标的文本

    相关代码

    // 请把代码文本粘贴到下方（请勿用图片代替代码）

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 400px;
        height: 200px;
        margin: 100px auto;
        border-top: none;
      
    }
    .btn{
        overflow: hidden;
        display:flex;
    }
    .btn li{
        /* float: left; */
        list-style: none;
        flex:1;
        text-align: center;
        height: 50px;
        line-height: 50px;
        border:1px solid #000;
        border-right:none;
    }
    li:last-child{
        border-right:1px solid #000;
    }
    .content{
        height: 200px;
        padding: 10px;
        border:1px solid #000;
        border-top: none;
       
    }
</style>

    </head>
    <body>

    <div class="box">
    <ul class="btn">
        <li>按钮a</li>
        <li>按钮b</li>
        <li>按钮c</li>
    </ul>
    <div class="content">
        <p class="text">我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字
                我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字
        </p>
    </div>
    <p class='a'>我是谁</p>
    <button class="btn">点击我</button>
</div>
<script

    src="https://code.jquery.com/jquery-1.12.4.js"
    integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
    crossorigin="anonymous"></script>

    <script>
     var textArr = [
        "我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字我是按钮a的文字",
        "我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字我是按钮b的文字",
        "我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字我是按钮c的文字"     
    ]
    // 使用JQUery方法
    var $lis = $('li')
    for(let  i = 0;i<textArr.length;i++){
      $lis[i].click(function(){
          console.log('哈哈哈')
          $('.text ').text(textArr[i])
      })
    }
</script>

    </body>
    </html>

    在控制台查看，发现'哈哈哈'没有输出，事件也没绑上，等于根本就没有进入那个绑定函数

    javascriptjquery
    阅读 2.6k
    5 个回答
    得票最新
    头像
    唯一丶
      23.3k103743
      ✓ 已被采纳

      既然你都用了 jq 就没必要这样。

      // 伪代码如下
var $li = $('li'),$text = $('.text');
$li.on('click',function(){
    $text.text(textArr[$(this).index()]);
});
      头像
      易函123
        1.2k2822

        用each()方法，

        let $lis = $('li');
    $lis.each(function(index, value){
      $lis.eq(index).click(function(){
          console.log('哈哈哈');
          $('.text ').text(textArr[index]);
    })
    })

        你的思路没问题，
        但是for是直接执行的：$lis[i]没有绑定到对应元素

         let $lis = $('li');
    
    for(let  i = 0;i<textArr.length;i++){
      console.log($lis[i]);
      $lis.eq(i).click(function(){
          console.log('哈哈哈');
          $('.text ').text(textArr[i]);
      })
    }

        这样子可以达到效果

        
    let $lis = $('li');
    function changeText(e){
          console.log('哈哈哈');
          $('.text ').text(textArr[e]);
    }
    for(let  i = 0;i<textArr.length;i++){
      console.log($lis[i]);
      $lis.eq(i).attr("onclick", 'changeText(' + i +')');
    }
        头像
        凡人必胜
          62

          因为你写了 $lis[i] 就是dom对象了，不能用jquery的click注册事件
          改成onclick就好了
          $lis[i].onclick = function () {

          console.log('哈哈哈')
$('.text ').text(textArr[i])

          };

          头像
          沈小白
            24211324

            你for循环里面用的是textArr.length 应该用$lis.length 然后$('.text ').text(textArr[i]) 去掉[i]

            头像
            月半小夜曲
              135611
              //改动：因为写了 $lis[i] 就是dom对象了，不能用jquery的click注册事件
$lis[i].onclick = function () {

console.log('哈哈哈')
$('.text ').text(textArr[i])
};
              //方法2：

var $li = $('li'),$text = $('.text');
$li.on('click',function(){
    $text.text(textArr[$(this).index()]);
});
              方法3：
let $lis = $('li');
    $lis.each(function(index, value){
      $lis.eq(index).click(function(){
          console.log('哈哈哈');
          $('.text ').text(textArr[index]);
    })
    })
              查看全部 5 个回答
              推荐问题