Question

我在使用jquery显示或隐藏表行时遇到问题。我希望如果用户点击带有id="jobtitle"的表格行，那么带class="texter"的tr会在已经打开时显示或隐藏。

我的代码现在是：

<table>
    <tbody>
        <?php foreach($works as $w){ ?>
            <tr id="jobtitle" onclick="onPress()">
                <td>
                    <?php echo $w->title; ?>
                </td>
            </tr>
            <tr class="texter" style="display:none;">
                <td>
                    <?php echo $w->text; ?>
                </td>
            </tr>
        <?php } ?>
    </tbody>
</table>

<script>
    function onPress(){
            var isHidden = $('.texter').is(":hidden");
            if (isHidden == true) {
                $(".texter").show();
                $("#colorized").css("background", "#06499d");
            } else {
                $('.texter').hide();
                $("#colorized").css("background", "#20669d");
            }
    }
</script>

到目前为止，class="texter"的所有tr都会扩展。如何只使用class="jobtitle"点击tr来切换一个tr。

Answer 1

由于我没有50个代表，我需要写一个答案而不是评论。它以某种方式演变成一个完整的答案，而不仅仅是一个评论。

首先，我同意在单个HTML文档中使用多个ID是错误的，也是不允许的。他解决了这个问题，这很好。但我也认为使用表并不像上面有人称之为“nono”。 并非总是，至少使用表作为表而不是用于布局，是完全合法的。但OP只构建一个列表，实际上你不需要表。在这种情况下，更好的做法是使用func hideKeyboard() { view.endEditing(true) }元素并删除内联CSS，如下所示：

<div>

然后，我将使用jQuery方法<div class="wrap"> <?php $num = 1; ?> <?php foreach($works as $w){ ?> <div id="colorized<?php echo $num; ?>" class="fromage"> <div class="title"> <?php echo $w->title; ?> </div> <div class="texter"> <?php echo $w->text; ?> </div> </div> <?php $num++; ?> <?php } ?> </div>。例如：

toggleClass()

让CSS做神奇：

$(document).ready(function(){
    $('.title').click(function(){
        $(this).parent().toggleClass("baguette");
    });
});

瞧！

JS Fiddle

Answer 2

这是你想要做的吗？如果您点击id='jobtitle'，则会显示class='texter'的孩子。

$('#jobtitle').on('click', function(){
   $(this).find('.texter').show(); 
});

如果id='jobtitle'有class='texter'，请显示短信

$('#jobtitle').on('click', function(){
    if($(this).hasClass.('texter')){
        $(this).show();
    }
});

Answer 3

这是我的解决方案。它不是很好但是它现在有效，直到我将重构整个代码。

<table>
    <tbody>
      <?php $num = 1; ?>
        <?php foreach($works as $w){ ?>
          <tr id="colorized<?php echo $num; ?>" onclick="onPress(<?php echo $num; ?>)">
                <td>
                    <?php echo $w->title; ?>
                </td>
            </tr>
            <tr class="texter<?php echo $num; ?>" style="display:none;">
                <td>
                    <?php echo $w->text; ?>
                </td>
            </tr>
          <?php $num++; ?>
        <?php } ?>
    </tbody>
</table>

和JavaScript

function onPress(value){
        var isHidden = $('.texter'+value).is(":hidden");
        var id = "texter"+value;
    $(".texter"+value).fadeToggle();
        if (isHidden == true) {
            $(".id").show();
            $("#colorized"+value).css("background", "#06499d");
        } else {
            $(".id").hide();
            $("#colorized"+value).css("background", "#20669d");
        }
}

如果用户点击表格行，则显示或隐藏表格行（HTML / JQuery）

3 个答案: