Question

我可以证明过于复杂，所以如果我走下兔子洞，请阻止我。我在点击一个复选框时尝试获取某个范围的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>

Answer 1

在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/

Answer 2

试试这个：

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

在点击处理程序this中是单击的元素，然后.closest(".check")为您提供包含"check"段的元素，然后从那里可以找到范围。

您根本不需要使用元素的ID，因为虽然您可以在执行此操作时检索ID，但您必须已经拥有对正确元素的引用，因此您只需设置其.text()直接

查找最近的跨度id以替换跨度内容

2 个答案: