鏈接文本替換爲列表文本

Question

在這個給定的例子中，我需要「選擇答案」文本應替換爲點擊列表，例如。如果我點擊「選擇答案1」，它應該替換爲「I. Bridge」。

$('.sbSelector').click(function() { 
 
    var $this = $(this).closest('.sbHolder').find('.sbOptions'); 
 
    $('.sbOptions').not($this).slideUp(); 
 
    $this.slideToggle('slow'); 
 
});

.sbSelector { 
 
    display: block; 
 
    border: 1px solid gray; 
 
    padding: 5px 15px; 
 
    margin-bottom: 15px; 
 
    text-decoration: none; 
 
} 
 
.sbOptions { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="sbHolder"> 
 
    <a href="#" class="sbSelector">Choose answer 1</a> 
 
    <ul class="sbOptions"> 
 
    <li><a href="#">Choose answer 1</a> 
 
    </li> 
 
    <li><a href="#">I. Bridge</a> 
 
    </li> 
 
    <li><a href="#">II. Nut</a> 
 
    </li> 
 
    <li><a href="#">III. Neck</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="sbHolder"> 
 
    <a href="#" class="sbSelector">Choose answer 2</a> 
 
    <ul class="sbOptions"> 
 
    <li><a href="#">Choose answer 2</a> 
 
    </li> 
 
    <li><a href="#">I. Bridge</a> 
 
    </li> 
 
    <li><a href="#">II. Nut</a> 
 
    </li> 
 
    <li><a href="#">III. Neck</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="sbHolder"> 
 
    <a href="#" class="sbSelector">Choose answer 3</a> 
 
    <ul class="sbOptions"> 
 
    <li><a href="#">Choose answer 3</a> 
 
    </li> 
 
    <li><a href="#">I. Bridge</a> 
 
    </li> 
 
    <li><a href="#">II. Nut</a> 
 
    </li> 
 
    <li><a href="#">III. Neck</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

綁定click()事件處理程序列表項，基於點擊的列表項更新內容。

$('.sbSelector').click(function() { 
 
    var $this = $(this).closest('.sbHolder').find('.sbOptions'); 
 
    $('.sbOptions').not($this).slideUp(); 
 
    $this.slideToggle('slow'); 
 
}); 
 

 
$('.sbOptions li a').click(function(e) { 
 
    e.preventDefault(); // prevent default click event action 
 
    var $this = $(this); 
 
    $this.closest('ul') // get parent ul 
 
    .prev() // get the `a` tag which is to be updated 
 
    .text($this.text()); // update the content 
 
})

.sbSelector { 
 
    display: block; 
 
    border: 1px solid gray; 
 
    padding: 5px 15px; 
 
    margin-bottom: 15px; 
 
    text-decoration: none; 
 
} 
 
.sbOptions { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="sbHolder"> 
 
    <a href="#" class="sbSelector">Choose answer 1</a> 
 
    <ul class="sbOptions"> 
 
    <li><a href="#">Choose answer 1</a> 
 
    </li> 
 
    <li><a href="#">I. Bridge</a> 
 
    </li> 
 
    <li><a href="#">II. Nut</a> 
 
    </li> 
 
    <li><a href="#">III. Neck</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="sbHolder"> 
 
    <a href="#" class="sbSelector">Choose answer 2</a> 
 
    <ul class="sbOptions"> 
 
    <li><a href="#">Choose answer 2</a> 
 
    </li> 
 
    <li><a href="#">I. Bridge</a> 
 
    </li> 
 
    <li><a href="#">II. Nut</a> 
 
    </li> 
 
    <li><a href="#">III. Neck</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="sbHolder"> 
 
    <a href="#" class="sbSelector">Choose answer 3</a> 
 
    <ul class="sbOptions"> 
 
    <li><a href="#">Choose answer 3</a> 
 
    </li> 
 
    <li><a href="#">I. Bridge</a> 
 
    </li> 
 
    <li><a href="#">II. Nut</a> 
 
    </li> 
 
    <li><a href="#">III. Neck</a> 
 
    </li> 
 
    </ul> 
 
</div>