目前分類：jquery (4)

瀏覽方式： 標題列表 簡短摘要

當用php的for產生了許多的相同類別的按鈕與需要顯示內容DIV，這時依照原先的程式碼是不會有反應的

原先 修改後

 

<script>
        $(document).ready(function(){
            $(".Show").click(function(){
                $(".Div).show("slow");
                $(".Show).hide();
                $(".Hide).show();
            });
            $("#Hide").click(function(){
                status = $(this).attr("name");
                $(".Div).hide("slow");
                $(".Hide).hide();
                $(".Show).show();
            });
        });
    </script>

點選到類別SHOW會抓取他的name值，

抓取NAME值為相同之DIV來做顯示內容

<script>
        var status="";
        $(document).ready(function(){
            $(".Show").click(function(){
                status = $(this).attr("name");
                $(".Div[name='"+status+"']").show("slow");
                $(".Show[name='"+status+"']").hide();
                $(".Hide[name='"+status+"']").show();
            });
            $("#Hide").click(function(){
                status = $(this).attr("name");
                $(".Div[name='"+status+"']").hide("slow");
                $(".Hide[name='"+status+"']").hide();
                $(".Show[name='"+status+"']").show();
            });
        });
    </script>


 

文章標籤
php for javascript name class

kkkelu1008 發表在 痞客邦 留言(0) 人氣()

▲top
<div class="form-group">
        <label class="radio-inline"><input type="radio" name='selecttype'  value='1'>Class 1</label>
        <label class="radio-inline"><input type="radio" name='selecttype' checked value='2'>Class 2</label>
 </div>

<div id='catalog' style='display:none' >
        Class 1 Content
</div>
 <div id='search'>
        Class 2 Content
</div>

<script>
        $(document).ready(function(){
                $("input[name='selecttype']").change(function () {
                        if ($("input[name='selecttype']:checked").val() =='1') {
                                $('#catalog').show();
                                $('#search').hide();
                        } else {
                                $('#catalog').hide();
                                $('#search').show();
                        }
                });
        });
</script>
文章標籤
radioButton show hide

kkkelu1008 發表在 痞客邦 留言(0) 人氣()

▲top

<script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();
            $("#Show").click(function(){
                $("#Div").show("slow");
                $("#Show").hide();
                $("#Hide").show();
            });
            $("#Hide").click(function(){
                $("#Div").hide("slow");
                $("#Hide").hide();
                $("#Show").show();
            });
        });
</script>

 

<button type="button" class="btn btn-default" id="Show">瀏覽</button>
<button type="button" class="btn btn-default" id="Hide" style="display:none;">隱藏</button>
 

<div id="advisoryInfDiv" style="display:none;"><br/>
     <span>內容</span>
</div>

文章標籤
jQuery hide() show()

kkkelu1008 發表在 痞客邦 留言(0) 人氣()

▲top

jquery

<script>
$(document).ready(function(){
    $('.fontSizeToBig').click(function() {
        $(".modal-body").css('font-size',"30px");
    });
    $('.fontSizeBig').click(function() {
        $(".modal-body").css('font-size',"20px");
    });
    $('.fontSizePreset').click(function() {
        $(".modal-body").css('font-size',"14px");
    });    
});
</script>

 

按鈕部分

<div style="float: right;">字型:

　<button type="button" style="font-size:15px;font-weight: bold;" class="btn btn-xs fontSizePreset">預設 </button>

　<button type="button" style="font-size:15px;font-weight: bold;" class="btn btn-xs fontSizeBig">中 </button>

　<button type="button" style="font-size:15px;font-weight: bold;" class="btn btn-xs fontSizeToBig" >大 </button>

</div>

要改變的內容部分

<div class="modal-body" id="modal-body">
　<p>內容：<?php echo $bb2['content'];?></p>
</div>

文章標籤
jquery css class

kkkelu1008 發表在 痞客邦 留言(0) 人氣()

▲top