Question

我有一个列表，每个项目都有不同的ID。因此，对于单个项目，我已经编写了HTML部分。

结构类似于

<div id='33496'>
    <div class='event_content'>.....
      <div>......
      </div>
      .....
    </div>

    <div class='event_content1'>
    ......
    </div>

    <div class='job_inn'>.....</div>

    <div><a id="show_more">text</a>
</div>

<div id='33495'>
    <div class='event_content'>.....
      <div>......
      </div>
      .....
    </div>

    <div class='event_content1'>
    ......
    </div>

    <div class='job_inn'>.....</div>

    <div><a id="show_more">text</a>
</div>

所以我想在这里，如果我点击任何div event_content1或event_content或job_inn show_more的文字应该改变我怎么能这样做？？

这是我试过的代码＆amp;得到了解决方案....

$(".event_content1,.job_inn,.event_title").unbind('click').click(function(){
        var divid = $(this).attr('data-id');
        var show_more = "#show_more" + divid;   
        var show_less = "#show_less" + divid;

    if($(show_more).is( ':visible' )){
            $(this).parent().find('.show_more_link').text('show more');
            $(show_more).toggle('slow');
            $(show_less).toggle('slow');
          } else {
             $(this).parent().find('.show_more_link').text('show less');
             $(show_more).toggle('slow');
             $(show_less).toggle('slow');
          }
    });

Answer 1

请注意，ID必须是唯一的。但是你对a标签使用相同的id。所以使用class而不是id会更好：

$('.event_content, .event_content1, .job_inn').on('click',function (){
   $(this).parent().find('.show_more').text('change your text');
});

请务必全部更改：

<a id="show_more">text</a>

要

<a class="show_more">text</a>

Answer 2

改为：

<div class='row' id='33496'>
    <div class='event_content'>.....
      <div>......
      </div>
      .....
    </div>

    <div class='event_content1'>
    ......
    </div>

    <div class='job_inn'>.....</div>

    <div><a class='text_here' id="show_more">text</a>
</div>

<div class='row' id='33495'>
    <div class='event_content'>.....
      <div>......
      </div>
      .....
    </div>

    <div class='event_content1'>
    ......
    </div>

    <div class='job_inn'>.....</div>

    <div><a class='text_here' id="show_more">text</a>
</div>

使用或选择器之间：

$('.event_content, .event_content1, .job_inn').on('click', function()
{
    $('this').find('.text_here').text('put text here');
});

Answer 3

给出相同的id是一个错误的概念。

所以解决方案是改变id＆＃34; show_more＆＃34; to class =＆＃34; show_more＆＃34;

给这样的HTML

<div id='33496'>
    <div class='event_content'>.....
      <div>......
      </div>
      .....
    </div>

    <div class='event_content1'>
    ......
    </div>

    <div class='job_inn'>.....</div>

    <div class="show_more"><a class="show_more">text</a>
</div>

然后jQuery代码就像这样

$('.event_content,.event_content1,.job_inn').click(function(){
   $(this).nextAll('div.show_more').find('a.show_more').html('your new text to change');
});

//。next（）将找到类.show_more

的下一个div

Answer 4

黄金法则没有相同ID的元素。重复id = "show more"。所以改变像<div class="show_more"><a>text</a></div>

这样的html

现在，您可以点击class="show_more"

找到最近的".event_content, .event_content1, .job_inn"

您可以通过以下方式执行此操作：

$(".event_content, .event_content1, .job_inn").on("click", function(){
    $(this).siblings(".show_more").find("a").text("text you want")}
);

Answer 5

您希望将JQuery与siblings：

一起使用

$(".event_content, .event_content1, .job_inn").siblings('div').children('a[id="show_more"]').text("CHANGED");

所以点击会看起来像这样：

$(".event_content, .event_content1, .job_inn").click(function () {
    $(this).siblings('div').children('a[id="show_more"]').text("CHANGED");
});

<强> Demo Here

注意：如果您还想支持 event_content1，event_content2，event_content3 等，请检查此项 - 您可以做通配符选择： https://stackoverflow.com/a/7814252/643761

Answer 6

在HTML + CSS中，您可以使用tabindex选择器~。基本HTML：

<div tabindex="0" class="yourclass" > ....</div>

基本CSS

div.yourclass:focus ~ div a {color:red;}

为了能够点击div及其中的任何子项以获取.yourclass点击次数，您可以使用：pointer-events:none;

div.yourclass * {
  pointer-events:none;
}

但是，需要点击表单和链接：

   div.yourclass form *, 
   div.yourclass a {
     pointer-events:auto;
    }

<强> DEMO

指针事件仅适用于最新的浏览器，因此您仍然需要一些javascript：）

Answer 7

没有任何跨浏览器的方法可以使用CSS执行此操作。功能解决方案需要JavaScript。下面是一个jQuery示例和HTML的修改以适应。

如果列表增长，我建议添加一个额外的类和/或父包装器。

<div id='33496' class="group">
    <div class='event_content item'>.....</div>
    <div class='event_content1 item'>......</div>
    <div class='job_inn item'>.....</div>

    <div class='show_more'><a href='#'>text</a>
</div>

<div id='33495' class="group">
    <div class='event_content item'>.....</div>
    <div class='event_content1 item'>......</div>
    <div class='job_inn item'>.....</div>

    <div class='show_more'><a href='#'>text</a>
</div>

然后：

  $(".group").on("click", ".item", function(){ 
      $(this).closest(".group")
             .children(".show_more")
             .children("a")
             .text("your_text_here");
  });

如果你想从点击的元素中提取一些特定的文字以放置在你的节目更多的插槽中，你需要一些额外的逻辑，但这通常应该有效。

由于几个与此非常相似的答案尚未被接受，如果这不能满足您的需求，我们可能需要进一步澄清它是如何失败的，并且更具体地说明所需的行为或代码要求。

Answer 8

这是一个小型演示

<code> 
   $(".event_content, .event_content1, .job_inn").click(function () {
      $(this).siblings('div').children('a[id="show_more"]').text("CHANGED");
     });
</code>

http://jsfiddle.net/anshukas/chVdF/“DEMO”

单击任何div时更改锚标记的文本

8 个答案: