ボタンのクリックで異なるタイトルを表示する方法

ボタンのグループ名を表示すると、ボタンをクリックすると異なるタイトル（セクション-1、セクション-2）が表示されます。今は同じタイトルを表示しています。 screenshot of my web pageを参照してください。ボタンのクリックで異なるタイトルを表示する方法

<!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <!-- Latest compiled JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

    <div class="col-md-3" style="background:#e5eb8e; "> 

     <ul style="list-style:none;"> 
      <li ><h2>Section-1</h2></li> 
      <li ><button class="my-btn" style="width:100%">Button-1</button></li><br> 
      <li ><button class="my-btn" style="width:100%">Button-2</button></li><br> 
      <li ><button class="my-btn" style="width:100%">Button-3</button></li><br> 
      <li ><button class="my-btn" style="width:100%">Button-4</button></li><br> 
     </ul> 

     <ul style="list-style:none;"> 
      <li class="section"><h2>Section-2</h2></li> 
      <li ><button class="my-btn" style="width:100%">Button-5</button></li><br> 
      <li ><button class="my-btn" style="width:100%">Button-6</button></li><br> 
      <li ><button class="my-btn" style="width:100%">Button-7</button></li><br> 
     </ul> 

     <ul style="list-style:none;"> 
      <li class="section"><h2>Section-3</h2></li> 
      <li ><button class="my-btn" style="width:100%">Button-8</button></li><br> 
      <li ><button class="my-btn" class="my-btn" style="width:100%">Button-9</button></li><br> 
      <li ><button class="my-btn" style="width:100%">Button-10</button></li><br> 
     </ul> 
    </div> 
    <div class="col-md-9" style="background: #c2c2f7 ;height: 800px;"> 

    <div class="workarea"> 

     <div class="work-area-header"></div> 
    </div> 

    </div> 

    <script type="text/javascript"> 

     $(function(){ 
      var sectionName=$(".section").text(); 
      $(".my-btn").click(function(){ 

       $(".work-area-header").replaceWith("sectionName"); 

      }); 
     }); 

    </script> 
    </body> 
    </html>

出典

2017-12-12 Shubham Shrivastava

だから、このようなものをお探しですか？

$(".my-btn").click(function(){ 
    $(".work-area-header").replaceWith($(this).closest("ul").find(".section > h2").html()); 
});

出典

2017-12-12 09:35:52 Machigatta

のようなセクションごとにボタンにクラスを追加します。

$(function(){ 
    var sectionName=$(".section").text(); 
    $(".my-btn").click(function(){ 
     section = $(this).attr("class").split(" ")[1]; 
     alert(section); 
     $(".work-area-header").text(section); 
    }); 
});

codepen link

：

<button class="my-btn Section-3" style="width:100%">Button-10</button>`

JavaScriptの機能の変化を加えます

出典

2017-12-12 09:51:27

あなたがするとき：$(".section").text()。そのクラス名ですべての要素を取得し、テキストは最初の要素のtextの値を返します。

正しいテキストを取得するには、クリックしたボタンに関連する適切な要素を見つける必要があります。このためには、parentメソッドを使用して、親の子要素でクラス名が.sectionの要素を検索できます。それが効果的に他のことで一つの要素を置換するよう

$(function(){ 
    $(".my-btn").click(function(){ 
    var sectionName = $(this).parent().find(".section").text(); 
    $(".work-area .work-area-header").html(sectionName); 
    }); 
});

また、この場合にはreplaceWithを使用しないでください。その結果、ボタンXをクリックしている間に見つかった要素は、次にボタンXをクリックしたときに消えてしまいます。

出典

2017-12-12 10:06:30 Vladimir

ボタンのクリックで異なるタイトルを表示する方法

答えて

関連する問題