ホームページにjQueryカルーセルがあり、カテゴリページに他のjQueryグッズ（トグルとスライダー）があるWordPressテンプレートを使用していますが、それらはすべて個別に機能します。すべてのカテゴリ ページでスライダーを複製したかったのですが、追加すると、両方の jQuery が壊れます。誰かがお互いに仲良くする方法について提案してもらえますか? 2 つのコード スニペットを次に示します。
<script type="text/javascript">
// <![CDATA[
/* featured listings slider */
jQuery(document).ready(function($) {
$('.slider').jCarouselLite({
btnNext: '.next',
btnPrev: '.prev',
visible: 5,
hoverPause: true,
auto: 2800,
speed: 1100,
easing: 'easeOutQuint' // for different types of easing, see easing.js
});
});
// ]]>
</script>
と
<script type="text/javascript">
// <![CDATA[
// toggles the refine search field values
jQuery(document).ready(function($) {
$('div.handle').click(function() {
$(this).next('div.element').animate({
height: ['toggle', 'swing'],
opacity: 'toggle' }, 200
);
$(this).toggleClass('close', 'open');
return false;
});
<?php foreach ( $_POST as $field => $val ) : ?>
$('.<?php echo $field; ?> div.handle').toggleClass('close', 'open');
$('.<?php echo $field; ?> div.element').show();
<?php endforeach; ?>
});
// ]]>
</script>
...と
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function($) {
$('#dist-slider').slider( {
range: 'min',
min: 0,
max: 3000,
value: <?php echo esc_js( isset( $_POST['distance'] ) ? intval( $_POST['distance'] ) : '50' ); ?>,
step: 5,
slide: function(event, ui) {
$('#distance').val(ui.value + ' <?php echo $distance_unit; ?>');
}
});
$('#distance').val($('#dist-slider').slider('value') + ' <?php echo $distance_unit; ?>');
});
// ]]>
</script>
...そして最後のもの
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function($) {
$('#slider-range').slider( {
range: true,
min: <?php echo esc_js( intval( $cp_min_price ) ); ?>,
max: <?php echo esc_js( intval( $cp_max_price ) ); ?>,
step: 1,
values: [ <?php echo esc_js( "{$amount[0]}, {$amount[1]}" ); ?> ],
slide: function(event, ui) {
<?php switch ( $cp_curr_symbol_pos ) {
case 'left' :
?>$('#amount').val('<?php echo $curr_symbol; ?>' + ui.values[0] + ' - <?php echo $curr_symbol; ?>' + ui.values[1]);<?php
break;
case 'left_space' :
?>$('#amount').val('<?php echo $curr_symbol; ?> ' + ui.values[0] + ' - <?php echo $curr_symbol; ?> ' + ui.values[1]);<?php
break;
case 'right' :
?>$('#amount').val(ui.values[0] + '<?php echo $curr_symbol; ?> - ' + ui.values[1] + '<?php echo $curr_symbol; ?>' );<?php
break;
case 'right_space' :
?>$('#amount').val(ui.values[0] + ' <?php echo $curr_symbol; ?> - ' + ui.values[1] + ' <?php echo $curr_symbol; ?>' );<?php
break;
} ?>
}
});
<?php switch ( $cp_curr_symbol_pos ) {
case 'left' :
?>$('#amount').val('<?php echo $curr_symbol; ?>' + $('#slider-range').slider('values', 0) + ' - <?php echo $curr_symbol; ?>' + $('#slider-range').slider('values', 1));<?php
break;
case 'left_space' :
?>$('#amount').val('<?php echo $curr_symbol; ?> ' + $('#slider-range').slider('values', 0) + ' - <?php echo $curr_symbol; ?> ' + $('#slider-range').slider('values', 1));<?php
break;
case 'right' :
?>$('#amount').val($('#slider-range').slider('values', 0) + '<?php echo $curr_symbol; ?> - ' + $('#slider-range').slider('values', 1) + '<?php echo $curr_symbol; ?>');<?php
break;
case 'right_space' :
?>$('#amount').val($('#slider-range').slider('values', 0) + ' <?php echo $curr_symbol; ?> - ' + $('#slider-range').slider('values', 1) + ' <?php echo $curr_symbol; ?>');<?php
break;
} ?>
});
// ]]>
</script>
最後の 3 つはすべて一緒にうまく機能しますが、同じページに最初の 1 つを追加すると、すべてが壊れます。jQuery(document).ready(function($) {に変更し$(document).ready(function() {、2 行目$をに変更しようとしましjQueryたが、何も修正されませんでした。以下の別のインスタンスが表示されるため'.slider'、をに変更しようとしましたが、うまくいきませんでした。どんな助けでも大歓迎です！'.somethingslider'.slider