Question

我正在尝试制作动态按钮，按下按钮时所选部分会放大。

.PHP

<?php
    while($row = $results->fetch())
    {
    ?>
        <section class="rss-container">
            <p class="rss-desc">
            <?php                                                                                    
                echo '<div class="dmitri" id="d'.$row['id_ilmoitus'].'">'.$row['popup'].'</div>';
                echo '<div class="vladmir" id="v'.$row['id_ilmoitus'].'">'.$row["teksti"].'</div>';                                                   
            ?>
            </p>    
            <br />
            <span class="rss-badge more no-underline" id="button_<?php echo $row['id_ilmoitus'] ?>">Laajenna</span>
        </section>
        <br />
    <?php
    }
?>

.jquery

$('.vladmir').hide();
    $('.rss-badge').click(function(){
    $('d'+ ? ).toggle();
    $('v'+ ? ).toggle();
});

我不知道如何$row['id_ilmoitus]那里。我试图将其变为可变但无效。

很抱歉不清楚。

Answer 1

我建议您添加idilmoitus作为自定义数据 - * 属性，您可以使用.data()

进行访问

HTML 的

<span data-idilmoitus="<?php echo $row['id_ilmoitus'] ?>" class="rss-badge more no-underline" id="button_<?php echo $row['id_ilmoitus'] ?>">Laajenna</span>

JQuery的

$('.vladmir').hide();
$('.rss-badge').click(function(){
    var idilmoitus = $(this).data('idilmoitus');
    $('#d'+ idilmoitus ).toggle();
    $('#v'+ idilmoitus ).toggle();
});

另一种方法是遍历DOM

$('.rss-badge').click(function(){
    var section = $(this).closest('.rss-container');
    $(section).find('.dmitri').toggle();
    $(section).find('.vladmir').toggle();
});

Answer 2

你可以使用onclick并将参数发送到这个函数：

<span onclick="buttonClicked('<?php echo $row['id_ilmoitus'] ?>')" class="rss-badge more no-underline" id="button_<?php echo $row['id_ilmoitus'] ?>">Laajenna</span>

和javascript：

function buttonClicked(objId)
{
    $('d'+ objId ).toggle();
    $('v'+ objId ).toggle();
}

Answer 3

试试这个：

$('.rss-badge').click(function(){
    var attrib = $(this).attr( "id" );
    attrib = attrib.split('_')[1];

    $('#d' + attrib ).toggle();
    $('#v' + attrib ).toggle();
});

Answer 4

这是工作示例，您也不需要ID，只有CSS类才可以执行所有操作。

@Fiddle：http://jsfiddle.net/pragneshkaria/AJ5xJ/

JQUERY

   $('.rss-badge').click(function (){
    //alert('hi');
    $('.rss-container').css( "background-color", "" );
    $('.dmitri').css( "background-color", "" );
    $('.vladmir').css( "background-color", "" );

    $(this).parent().css( "background-color", "green" );

    $(this).parent().children().next(".dmitri").css( "background-color", "yellow" );

     $(this).parent().children().next(".vladmir").css( "background-color", "blue" );
});

HTML

<section class="rss-container">
<p class="rss-desc">                                                 
    <div class="dmitri" >D 1</div>
    <div class="vladmir" id="v1"> V 1</div>                                                  
</p>
<br />
<span class="rss-badge more no-underline" id="button_1">Laajenna 1</span>
</section>
<br />
<section class="rss-container">
<p class="rss-desc">                                                 
    <div class="dmitri" >D 2</div>
    <div class="vladmir" id="v1">V 2</div>                                                  
</p>
<br />
<span class="rss-badge more no-underline" id="button_1">Laajenna 2</span>
</section>
<br />
<br />
<section class="rss-container">
<p class="rss-desc">                                                 
    <div class="dmitri" >D 3</div>
    <div class="vladmir" id="v1">V 3</div>                                                  
</p>
<br />
<span class="rss-badge more no-underline" id="button_1">Laajenna 3</span>
</section>
<br />

CSS

.rss-container{
    border:1px solid red;
}
.rss-badge{
    border:1px solid blue;
    cursor:pointer;
}
.dmitri{
    border:1px solid #ccc;
}
.vladmir{
    border:1px solid #ccc;
}

希望这会对你有所帮助。您可以根据需要修改代码。

我刚刚添加了三个不同身份的静态div。

使用动态php变量创建动态按钮

4 个答案: