通过使用jQuery按下按钮来更改内容

时间：2018-07-30 19:13:39

标签： javascript jquery html 

$('.btn').click(function() {
  $('#contentLeft div').hide();
  $('#contentRight div').hide();
  var target = $(this).data('target');
  $(target).show();
})
@import url('https://fonts.googleapis.com/css?family=Montserrat');
.row {
  margin-left: 4%;
  margin-botton: 30px;
}

#contentTab1 {}

#contentTab2 {
  display: none;
  p {
    color: red;
  }
}

#contentTab3 {
  display: none;
  p {
    font-family: 'Montserrat', sans-serif;
    color: green;
  }
}

#contentRight {
  border: 1px dashed red;
}

#contentTabRight2,
#contentTabRight3 {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
  <div class="" style="padding-top:12px;">
    <button type="button" class="btn btn-primary" id="Btn1" data-target="#contentTab1,#contentTabRight1">Button 1</button>
    <button type="button" class="btn btn-primary" id="Btn2" data-target="#contentTab2,#contentTabRight2">Button 2</button>
    <button type="button" class="btn btn-primary" id="Btn3" data-target="#contentTab3,#contentTabRight3">Button 3</button>
  </div>
</div>

<div class="row">
  <div id="contentLeft" class="col-sm-4">
    <div id="contentTab1">
      <h2>Some Title 1</h2>
      <p>This is the content for pressing button 1. Venenatis iaculis tempor suspendisse condimentum egestas a a nulla odio eu parturient nibh parturient sem risus aliquam feugiat a enim nam ullamcorper suspendisse cum ullamcorper ac vestibulum adipiscing.
        Vestibulum dignissim vivamus nec iaculis vestibulum parturient conubia et ac scelerisque arcu litora mus ipsum.</p>
    </div>
    <div id="contentTab2">
      <h2>Some Title 2</h2>
      <p>
        Posuere posuere vestibulum vestibulum lobortis a venenatis libero tempor fermentum vestibulum purus suspendisse suspendisse a quam magnis eleifend magnis taciti parturient sit mi mi.
      </p>
    </div>
    <div id="contentTab3">
      <h2>Some Title 3</h2>
      <p>
        Nisl eu mus nec a molestie nulla molestie leo urna vestibulum maecenas a vestibulum et velit dis. Cum a convallis sagittis magnis ullamcorper a bibendum a quis lobortis vitae lacinia vel sem ultricies interdum convallis tincidunt ac arcu nam. Id vivamus
        mi dapibus ultricies nisi consectetur congue felis a nullam a condimentum lacinia a est imperdiet.
      </p>
      <button class="btn btn-success">Click me</button>
    </div>
  </div>


  <div id="contentRight" class="col-sm-8">
    <div id="contentTabRight1">
      <h3>
        Right Side Content Title 1
      </h3>
      <p>
        Nascetur nec ultrices condimentum torquent.
      </p>
      <img src="https://placeimg.com/300/100/tech/sepia" class="img-responsive">
    </div>
    <div id="contentTabRight2">
      <h3>
        Right Side Content Title 2
      </h3>
      <p>
        some content paragraph goes here...
      </p>
      <img src="https://placeimg.com/300/100/tech" class="img-responsive">
    </div>
    <div id="contentTabRight3">
      <h3>
        Right Side Content Title 3
      </h3>
      <p>
        Integer a a dictum diam dictumst magnis a vestibulum tellus convallis leo in parturient sodales purus himenaeos egestas.Nibh orci dui fames.
      </p>
      <img src="https://placeimg.com/300/100/any/grayscale" class="img-responsive">
    </div>
  </div>
</div>

我在使用jQuery更改Div中的内容时遇到问题。我有一个包含3个按钮的页面，当按下新按钮时，我需要在屏幕上的2个位置（左列和右列）中更新内容。我可以与第一个Div一起进行更新，但是我无法让第二个Div进行更新。非常感谢任何建议或帮助。

$('.btn').click(function() {
  $('#contentLeft div').hide();
  var target = '#' + $(this).data('target');
  $(target).show();
})
@import url('https://fonts.googleapis.com/css?family=Montserrat');

.row {
  margin-left: 4%;
  margin-botton: 30px;
}

#contentTab1 {
  
}

#contentTab2 {
  display:none;
  p {
    color: red;
  }
}

#contentTab3 {
  display:none;
  p {
    font-family: 'Montserrat', sans-serif;
    color: green;
  }
}

#contentRight {
  border: 1px dashed red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
    <div class="" style="padding-top:12px;">
      <button type="button" class="btn btn-primary" id="Btn1" data-target="contentTab1,contentTabRight1">Button 1</button>
      <button type="button" class="btn btn-primary" id="Btn2" data-target="contentTab2,contentTabRight2">Button 2</button>
      <button type="button" class="btn btn-primary" id="Btn3" data-target="contentTab3,contentTabRight3">Button 3</button>
    </div>
</div>

<div class="row">
  <div id="contentLeft" class="col-sm-4">
    <div id="contentTab1">
      <h2>Some Title 1</h2>
      <p>This is the content for pressing button 1. Venenatis iaculis tempor suspendisse condimentum egestas a a nulla odio eu parturient nibh parturient sem risus aliquam feugiat a enim nam ullamcorper suspendisse cum ullamcorper ac vestibulum adipiscing. Vestibulum dignissim vivamus nec iaculis vestibulum parturient conubia et ac scelerisque arcu litora mus ipsum.</p>
    </div>
    <div id="contentTab2">
      <h2>Some Title 2</h2>
      <p>
      Posuere posuere vestibulum vestibulum lobortis a venenatis libero tempor fermentum vestibulum purus suspendisse suspendisse a quam magnis eleifend magnis taciti parturient sit mi mi.
      </p>
    </div>
    <div id="contentTab3">
      <h2>Some Title 3</h2>
      <p>
      Nisl eu mus nec a molestie nulla molestie leo urna vestibulum maecenas a vestibulum et velit dis. Cum a convallis sagittis magnis ullamcorper a bibendum a quis lobortis vitae lacinia vel sem ultricies interdum convallis tincidunt ac arcu nam. Id vivamus mi dapibus ultricies nisi consectetur congue felis a nullam a condimentum lacinia a est imperdiet.
      </p>
      <button class="btn btn-success">Click me</button>
    </div>
  </div>
  
  
  <div id="contentRight" class="col-sm-8">
    <div id="contentTabRight1">
      <h3>
        Right Side Content Title 1
      </h3>
      <p>
      Nascetur nec ultrices condimentum torquent.
      </p>
      <img src="https://placeimg.com/300/100/tech/sepia" class="img-responsive">
    </div>
    <div id="contentTabRight2">
      <h3>
        Right Side Content Title 2
      </h3>
      <p>
        some content paragraph goes here...
      </p>
      <img
      src="https://placeimg.com/300/100/tech" class="img-responsive">
    </div>
    <div id="contentTabRight3">
      <h3>
        Right Side Content Title 3
      </h3>
      <p>
        Integer a a dictum diam dictumst magnis a vestibulum tellus convallis leo in parturient sodales purus himenaeos egestas.Nibh orci dui fames.
      </p>
      <img src="https://placeimg.com/300/100/any/grayscale" class="img-responsive">
    </div>
  </div>
</div>

4 个答案:

答案 0 :(得分：1)

这是因为您将ID引用作为逗号分隔的字符串存储在data-target属性中，并且从该字符串构造选择器时，您仅将#附加到开头，即：

contentTab1,contentTabRight1

...将给您：

#contentTab1,contentTabRight1，后者不是有效的CSS选择器。您想要的是用,分隔符分割字符串，然后将#附加到每个字符串上。一个例子：

var target = $(this).data('target').split(',').map(function(t) {
    return '#' + t;
}).join(',');
$(target).show();

或者，您只需更新data-target中的硬编码值，以使用正确的选择器格式开始，例如#contentTab1,#contentTabRight1，那么您根本不需要更改JS逻辑。

以下示例涉及我的第一个解决方案：

$('.btn').click(function() {
  $('#contentLeft div').hide();
  var target = $(this).data('target').split(',').map(function(t) {
    return '#' + t;
  }).join(',');
  $(target).show();
})
@import url('https://fonts.googleapis.com/css?family=Montserrat');

.row {
  margin-left: 4%;
  margin-botton: 30px;
}

#contentTab1 {
  
}

#contentTab2 {
  display:none;
  p {
    color: red;
  }
}

#contentTab3 {
  display:none;
  p {
    font-family: 'Montserrat', sans-serif;
    color: green;
  }
}

#contentRight {
  border: 1px dashed red;
}

#contentTabRight2, #contentTabRight3 {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
    <div class="" style="padding-top:12px;">
      <button type="button" class="btn btn-primary" id="Btn1" data-target="contentTab1,contentTabRight1">Button 1</button>
      <button type="button" class="btn btn-primary" id="Btn2" data-target="contentTab2,contentTabRight2">Button 2</button>
      <button type="button" class="btn btn-primary" id="Btn3" data-target="contentTab3,contentTabRight3">Button 3</button>
    </div>
</div>

<div class="row">
  <div id="contentLeft" class="col-sm-4">
    <div id="contentTab1">
      <h2>Some Title 1</h2>
      <p>This is the content for pressing button 1. Venenatis iaculis tempor suspendisse condimentum egestas a a nulla odio eu parturient nibh parturient sem risus aliquam feugiat a enim nam ullamcorper suspendisse cum ullamcorper ac vestibulum adipiscing. Vestibulum dignissim vivamus nec iaculis vestibulum parturient conubia et ac scelerisque arcu litora mus ipsum.</p>
    </div>
    <div id="contentTab2">
      <h2>Some Title 2</h2>
      <p>
      Posuere posuere vestibulum vestibulum lobortis a venenatis libero tempor fermentum vestibulum purus suspendisse suspendisse a quam magnis eleifend magnis taciti parturient sit mi mi.
      </p>
    </div>
    <div id="contentTab3">
      <h2>Some Title 3</h2>
      <p>
      Nisl eu mus nec a molestie nulla molestie leo urna vestibulum maecenas a vestibulum et velit dis. Cum a convallis sagittis magnis ullamcorper a bibendum a quis lobortis vitae lacinia vel sem ultricies interdum convallis tincidunt ac arcu nam. Id vivamus mi dapibus ultricies nisi consectetur congue felis a nullam a condimentum lacinia a est imperdiet.
      </p>
      <button class="btn btn-success">Click me</button>
    </div>
  </div>
  
  
  <div id="contentRight" class="col-sm-8">
    <div id="contentTabRight1">
      <h3>
        Right Side Content Title 1
      </h3>
      <p>
      Nascetur nec ultrices condimentum torquent.
      </p>
      <img src="https://placeimg.com/300/100/tech/sepia" class="img-responsive">
    </div>
    <div id="contentTabRight2">
      <h3>
        Right Side Content Title 2
      </h3>
      <p>
        some content paragraph goes here...
      </p>
      <img
      src="https://placeimg.com/300/100/tech" class="img-responsive">
    </div>
    <div id="contentTabRight3">
      <h3>
        Right Side Content Title 3
      </h3>
      <p>
        Integer a a dictum diam dictumst magnis a vestibulum tellus convallis leo in parturient sodales purus himenaeos egestas.Nibh orci dui fames.
      </p>
      <img src="https://placeimg.com/300/100/any/grayscale" class="img-responsive">
    </div>
  </div>
</div>

答案 1 :(得分：1)

希望您能理解。

0
cat 2
dog 3
bird    2
fish    1
cow 1
horse   1
lamb    1
camel   1
rhino   1

答案 2 :(得分：0)

您试图记录目标变量中包含什么？

我认为这将被解决为毫无意义的指令：

'#contentTab1,contentTabRight1'

我知道这将是一个丑陋的解决方案，但可以工作：

$('.btn').click(function() {
  $('#contentLeft div').hide();
  var ids = $(this).data('target').split(',');
  ids.each(function(i, data){
    $('#' + data).show();
  });
});

答案 3 :(得分：0)

我能够通过一些建议来解决我的问题。非常感谢您提供的所有帮助！

$('.btn').click(function() {
  $('#contentLeft div').hide();
  $('#contentRight div').hide();
  var target = $(this).data('target');
  $(target).show();
})
@import url('https://fonts.googleapis.com/css?family=Montserrat');
.row {
  margin-left: 4%;
  margin-botton: 30px;
}

#contentTab1 {}

#contentTab2 {
  display: none;
  p {
    color: red;
  }
}

#contentTab3 {
  display: none;
  p {
    font-family: 'Montserrat', sans-serif;
    color: green;
  }
}

#contentRight {
  border: 1px dashed red;
}

#contentTabRight2,
#contentTabRight3 {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
  <div class="" style="padding-top:12px;">
    <button type="button" class="btn btn-primary" id="Btn1" data-target="#contentTab1,#contentTabRight1">Button 1</button>
    <button type="button" class="btn btn-primary" id="Btn2" data-target="#contentTab2,#contentTabRight2">Button 2</button>
    <button type="button" class="btn btn-primary" id="Btn3" data-target="#contentTab3,#contentTabRight3">Button 3</button>
  </div>
</div>

<div class="row">
  <div id="contentLeft" class="col-sm-4">
    <div id="contentTab1">
      <h2>Some Title 1</h2>
      <p>This is the content for pressing button 1. Venenatis iaculis tempor suspendisse condimentum egestas a a nulla odio eu parturient nibh parturient sem risus aliquam feugiat a enim nam ullamcorper suspendisse cum ullamcorper ac vestibulum adipiscing.
        Vestibulum dignissim vivamus nec iaculis vestibulum parturient conubia et ac scelerisque arcu litora mus ipsum.</p>
    </div>
    <div id="contentTab2">
      <h2>Some Title 2</h2>
      <p>
        Posuere posuere vestibulum vestibulum lobortis a venenatis libero tempor fermentum vestibulum purus suspendisse suspendisse a quam magnis eleifend magnis taciti parturient sit mi mi.
      </p>
    </div>
    <div id="contentTab3">
      <h2>Some Title 3</h2>
      <p>
        Nisl eu mus nec a molestie nulla molestie leo urna vestibulum maecenas a vestibulum et velit dis. Cum a convallis sagittis magnis ullamcorper a bibendum a quis lobortis vitae lacinia vel sem ultricies interdum convallis tincidunt ac arcu nam. Id vivamus
        mi dapibus ultricies nisi consectetur congue felis a nullam a condimentum lacinia a est imperdiet.
      </p>
      <button class="btn btn-success">Click me</button>
    </div>
  </div>


  <div id="contentRight" class="col-sm-8">
    <div id="contentTabRight1">
      <h3>
        Right Side Content Title 1
      </h3>
      <p>
        Nascetur nec ultrices condimentum torquent.
      </p>
      <img src="https://placeimg.com/300/100/tech/sepia" class="img-responsive">
    </div>
    <div id="contentTabRight2">
      <h3>
        Right Side Content Title 2
      </h3>
      <p>
        some content paragraph goes here...
      </p>
      <img src="https://placeimg.com/300/100/tech" class="img-responsive">
    </div>
    <div id="contentTabRight3">
      <h3>
        Right Side Content Title 3
      </h3>
      <p>
        Integer a a dictum diam dictumst magnis a vestibulum tellus convallis leo in parturient sodales purus himenaeos egestas.Nibh orci dui fames.
      </p>
      <img src="https://placeimg.com/300/100/any/grayscale" class="img-responsive">
    </div>
  </div>
</div>

相关问题
最新问题