2

この質問がたくさん聞かれたらごめんなさい。私は現在、カスタムギャラリーを持つサイトに取り組んでいます。今立ち往生しているすべてのものの中で、そのギャラリーページインジケーター。

このページでは、左側が「ギャラリー」のギャラリーで構成され、「ページ」ごとに6つのギャラリーが表示されます。http://www.ct-social.com/ctsdev/aff/news-and-events/

ギャラリーの上には、ギャラリーのインジケーターとして機能する小さな青い点があります。ギャラリーインジケーターを作成するコードは次のとおりです。

    <?php for ($i=0; $i < $n2; $i++): ?>
    <div class="event-gallery-unselected"></div>
    <?php endfor; ?>

ロード時に、左端のドットにclass="event-gallery-selected"に起因する別のスタイルを与えたいと思います。他のドット（現在の選択を除く）をクリックすると、現在選択されているドットを「event-gallery-unselected」に戻す必要があり、クリックされたドットは「event-gallery-selected」になります。

私はPHPに少し慣れていませんが、JavaScriptとJQueryには非常に慣れていません。これらの言語のいずれかを例として使用する場合、説明を分解していただけますか？たくさんのご協力ありがとうございました。

更新されたコード：CSS

.event-gallery.selected {
position: relative; 
top: -0.7em;  
background: white;
background-color: #1e93bb;
width: 20px;
height: 20px;
margin: 7px;
border-radius: 50%; 
}
.event-gallery {    
position: relative; 
top: -1.1em;  
background: white;
background-color: #63c5e7;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 7px;
float: right;
cursor: pointer;
}

更新されたコードJS

<script type="text/javascript">
jQuery(document).ready(function($){
    $(".event-gallery").click(function() {
        $(this).addClass('selected').siblings().removeClass('selected');
    });
});
</script>

ちょうど今それを動かしました。

4

4 に答える 4

4

divギャラリーのすべての要素に存在するクラスを用意することをお勧めします。これにより、一般的なスタイルを維持でき、クリックハンドラーを1つだけ持つことができます。selectedその後、必要に応じて切り替える別のクラスを作成できます。これを試して：

<?php for ($i = 0; $i < $n2; $i++): ?>
    <div class="event-gallery"></div>
<?php endfor; ?>

.event-gallery { 
    color: #000; /* default styling ... */
    padding: 5px;
}
.event-gallery.selected { 
    color: #FFF; /* selected item styling ... */
    background-color: #C00;
}

$(".event-gallery").click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

フィドルの例

于 2012-12-10T16:23:24.650 に答える
0

次のようにjQueryを使用します。

$('divid').click(function(){
    $('divid').css('background-image', 'pic2.jpeg');
});

例えば

于 2012-12-10T16:24:25.917 に答える
0

要素のセットがある場合：

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

私は通常それをそのように扱います：

var $items = $('#wrapper .item'); 
$('.item').click(function(){
    $items.removeClass('active'); // 'reset' the active links
    $(this).addClass('active'); // apply the active class to the clicked item
})
于 2012-12-10T16:25:39.983 に答える
0

これは、jQueryの少しの助けを借りて簡単に行うことができます。

$(function() {
    $(".even-gallery-unselected").on("click", function() {
        this.removeClass("event-gallery-unselected")
            .addClass("event-gallery-selected");
    });
});
于 2012-12-10T16:26:09.717 に答える