找到最接近的跨度id來替換跨度內容

我可以證明這一點很複雜，所以如果我要去掉一個兔子洞，請阻止我。我試圖在單擊複選框時獲取跨度的id，然後更改該跨度中的內容。找到最接近的跨度id來替換跨度內容

我已經嘗試了一些東西，我認爲我走在了正確的軌道上，但正如我所說的，我傾向於將這些事情複雜化。順便說一下，所有的ID都是不同的，並由數據庫ID號設置。

我已經試過這

var readInput = $(".check span").attr('id'); 
$('#'.readInput).text('Read');

哪一種類型的作品的。除了只抓取第一個ID，即使我點擊第三或第四個複選框....也不會改變文本。

我也試過只是抓住跨度，然後用這種方式進行編號，但那不是我所需要的。

任何幫助將是美好的！

整個功能看起來像這樣......雖然這個問題很多都沒有必要。

$('.memo input.checkIt').on("click", function(){ 
    var name_attr = $(this).attr('name'); 
    var hidden_input = $('input[name="' + name_attr + '"]'); 

    if($(this).siblings('a').attr("class") == 'checked') { 
    hidden_input.val(0); 
    }else { 
    hidden_input.val(1); 
    $(this).attr('disabled','disabled').parent().addClass('disabled'); 

    var readInput = $(".check span").attr('id'); 
    $('#' + readInput).text('Read'); 

    console.log(readInput); 
    } 
});

，這是HTML

<p class="pull-right check"> 
@if($cover_design_note->is_read) 
    {{ date('m/d/Y g:i a', strtotime($cover_design_note->date)) }}&nbsp;&nbsp;<i class="icon-thumbs-up program_this"></i> &nbsp; Read 
    @else 
    <input type="checkbox" class="checkIt" name="{{ $cover_design_note->id }}" /><span id="messRead{{ $cover_design_note->id }}"> Unread</span> 
    @endif 
</p>

來源

2013-08-22 zazvorniki

你能發佈整個事件處理程序和標記嗎？ –

忽略此評論 – tmcc

試試這個：

$(this).closest(".check").find("span").text('Read');

在單擊處理this是點擊的元素，然後.closest(".check")爲您提供了元素的包含"check"段落，然後從那裏你可以找到跨度。

根本不需要使用元素的ID，因爲儘管您可以在檢索時檢索該ID，但您必須已經有對正確元素的引用，以便您可以直接設置它的.text()。

來源

2013-08-22 22:47:48 nnnnnn

是的，非常感謝。我原本試圖做這樣的事情，但後來決定再次使事情複雜化...... – zazvorniki

在javascript中的連接用一個+完成：

你的選擇應該是：

$('#' + readInput).text('Read');

這可能是更容易移動到span標記的html中的類，例如：

HTML

<div class="memo"> 
<p class="pull-right check"> 
&nbsp;&nbsp;<i class="icon-thumbs-up program_this"></i> &nbsp; 
    <input type="checkbox" class="checkIt"/> 
    <span id="somethingDynamic" class="messRead"> Unread</span> 
</p> 
</div>

這真的歸結的JavaScript：

$('.memo input.checkIt').on("click", function(){ 
    //omitted other parts of code 
    $('.messRead', $(this).parent()).text('Read'); 
});

的Javascript

$('.memo input.checkIt').on("click", function(){ 
    $('.messRead', $(this).parent()).text('Read'); 
});

的jsfiddle：http://jsfiddle.net/BYU3w/

來源

2013-08-22 22:38:34

謝謝，我習慣於使用php連接！儘管如此，我仍然無法獲得ID ... – zazvorniki

發佈事件處理程序和標記 –

找到最接近的跨度id來替換跨度內容

回答

相關問題