Question

对不起中庸之道。我的意思是索引，而不是价值。遗憾。

我想知道是否有办法使用此jsfiddle示例的显示内容“.wbox”的值与隐藏值一致，点击时会显示隐藏的内容？

例如，单击Cont 1时，隐藏框1显示。单击Cont2时，隐藏框2显示......等等。

HTML：

<div class="box">
    <div class="content one">
        <h1>Cont 1</h1>
    </div>
    <div class="content two">
        <h1>Cont 2</h1>
    </div>
    <div class="content three">
        <h1>Cont 3</h1>
    </div>
</div>

<div class="hidden-content">
    <div class="hidden-box b-one">one</div>
    <div class="hidden-box b-two">two</div>
    <div class="hidden-box b-three">three</div>    
</div>

jquery的：

var boxVal = $('.box').val();

感谢您的帮助！

我真正想做的是缩短代码：

$('.one').on('click', function(){
    $('.b-one').show()
});

依旧等等

Answer 1

尝试此操作：使用content div的索引显示hidden-box

$(function(){
    $('.content').click(function(){
      var index = $(this).index();
        $('.hidden-content .hidden-box:eq('+index+')').show();
    });
});

并在您的CSS中进行更改，而不是隐藏hidden-content div，您需要隐藏hidden-box。所以改变你的

.hidden-content{
    display:none;
}

到

.hidden-box{
    display:none;
}

<强> Demo

Answer 2

这是另一种方式（虽然不太可靠，因为如果你改变你的类会破坏）：

$(function () {
    $('.content').on('click', function () {
        var className = $(this).attr('class').replace('content', '').trim();        
        $('.hidden-box').hide();
        $('.b-' + className).show();
    });
});

.hidden-box {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <div class="content one">
        <h1>Cont 1</h1>
    </div>
    <div class="content two">
        <h1>Cont 2</h1>
    </div>
    <div class="content three">
        <h1>Cont 3</h1>
    </div>
</div>

<div class="hidden-content">
    <div class="hidden-box b-one">one</div>
    <div class="hidden-box b-two">two</div>
    <div class="hidden-box b-three">three</div>    
</div>

<强>更新

根据我同意的@Regent评论，这将是一种更可靠的方式，因为即使您更改了标记，它也会起作用。您只需要在标记中添加data属性，该属性将用于匹配元素：

$(function () {
    $('.content').on('click', function () {        
        var sel = $(this).data('rel');
        
        $('.hidden-box').each(function () {
            $(this).toggle($(this).data('rel') == sel);
        });
    });
});

.hidden-box {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="box">
    <div class="content one" data-rel="1">
        <h1>Cont 1</h1>
    </div>
    <div class="content two" data-rel="2">
        <h1>Cont 2</h1>
    </div>
    <div class="content three" data-rel="3">
        <h1>Cont 3</h1>
    </div>
</div>

<div class="hidden-content">
    <div class="hidden-box b-one" data-rel="1">one</div>
    <div class="hidden-box b-two" data-rel="2">two</div>
    <div class="hidden-box b-three" data-rel="3">three</div>    
</div>

Answer 3

如果你想坚持使用现有的HTML，那将会很麻烦，因为有两种方法可以处理这种情况。

将“Cont 1”之类的字符串翻译成“one”，将“Cont 2”翻译成“two”。这一切都很好，直到九，但100 - ＆gt;百？甚至一千个？
另一种方法是将您的隐藏框命名为“b-one”，“b-two”，而不是将它们命名为“b-1”，“b-2”，“b-3”。这样你就可以检测点击的元素，然后擦除“Cont”部分，然后使用字符串的其余部分来获取隐藏部分的类。

上述两种情况都会给你一个非常脏的代码，因为你必须得到.html()点击的元素和h1标签的规定。

所以我的建议是遵循以下方法。

HTML：

<div class="box">
    <div class="content one" rel="1">
        <h1>Cont 1</h1>
    </div>
    <div class="content two" rel="2">
        <h1>Cont 2</h1>
    </div>
    <div class="content three" rel="3">
        <h1>Cont 3</h1>
    </div>
</div>

<div class="hidden-content">
    <div class="hidden-box b-1">one</div>
    <div class="hidden-box b-2">two</div>
    <div class="hidden-box b-2">three</div>    
</div>

JS：

$('.content').on('click', function(){
    var divNum = this.rel;

    $('.b-'+divNum).show();
});

Answer 4

我建议您按以下方式重构HTML：

<div class="box">
<div class="content" id= "c1">
    <h1>Cont 1</h1>
</div>
<div class="content" id= "c2">
    <h1>Cont 2</h1>
</div>
<div class="content" id= "c3">
    <h1>Cont 3</h1>
</div>

<div class="hidden-content">
<div class="hidden-box" id= "h1">one</div>
<div class="hidden-box" id= "h2">two</div>
<div class="hidden-box" id= "h3">three</div>

然后使用它作为你的jquery代码：

$('.content').click(function(){
var num = $(this).attr('id').split("c")[1];
$("#h"+num).show();
});

顺便说一下，改变你的css：

.hidden-content{
/*    display:none;*/
}
.hidden-box{
width:35px;
height:35px;
border:1px solid black;
display:none;
}

如何根据点击的值jquery显示隐藏的内容？

4 个答案: