我正在尝试用对象文字模式来解决我的问题。
这是我的jsFiddle：https://jsfiddle.net/1w8Lcdwk/
我有一个手风琴，当我在第一个面板上选择select元素中的4和5选项时，它禁用面板2和面板3.这是有效的。现在我必须更改按钮功能。当面板被禁用时，它应该转到下一个活动（未禁用）面板。
我this.controllTab(event, $next=3, $previous=3);如何在不调用accordion函数的情况下为函数提供这些参数。只有当我点击下一个按钮时才应该调用该函数。我正在将$next: $previous步骤从1更改为3.但这不起作用。
var bestellvorgang = {
$accordion:null,
init: function() {
this.cacheDom();
this.bindEvent();
$accordion.accordion();
},
cacheDom: function() {
$accordion = $('#accordion');
$btnTabControl = $accordion.find('button[name=tab-control]');
$productSelect = $accordion.find('#productSelect');
},
bindEvent: function() {
$btnTabControl.on('click', this.controllTab.bind(this));
$productSelect.on('change', this.productSelect.bind(this));
},
controllTab: function(event, $next=1, $previous=1) {
event.preventDefault();
var delta = $(event.currentTarget).is('.next') ? $next:-$previous;
$accordion.accordion('option', 'active', ($accordion.accordion('option', 'active')) + delta);
},
productSelect: function(event) {
$selected = event.currentTarget.value;
switch($selected) {
case 'p4':
$('#ui-id-3, #ui-id-5').addClass('ui-state-disabled');
this.controllTab(event, $next=3, $previous=3);
break;
case 'p5':
$('#ui-id-3, #ui-id-5').addClass('ui-state-disabled');
break;
default:
$('#ui-id-3, #ui-id-5').removeClass('ui-state-disabled');
}
}
};
$(document).ready(function(){
bestellvorgang.init();
});
答案 0 :(得分：0)
更改
this.controllTab(event, $next=3, $previous=3);
到
this.controllTab(event, 4, 1);
似乎有效。见这里 - https://jsfiddle.net/VaTz88/1w8Lcdwk/1/
答案 1 :(得分：0)
当面板被禁用时，它应该转到下一个活动（未禁用）面板。
因为您更改了活动面板：
controllTab: function(event, $next=1, $previous=1) {
它足以在最后添加一个测试，以便在活动面板被禁用时移动到下一个活动面板：
controllTab: function(event, $next=1, $previous=1) {
event.preventDefault();
var delta = $(event.currentTarget).is('.next') ? $next : -$previous;
$accordion.accordion('option', 'active',
($accordion.accordion('option', 'active')) + delta);
var next = 'gt';
var prev = 'lt';
if (event.target.textContent.trim().toLowerCase() == 'previous') {
next = 'lt';
prev = 'gt';
}
var activePanel = $accordion.accordion('option', 'active');
if ($accordion.children('h3.ui-accordion-header')
.eq(activePanel).is('.ui-state-disabled')) {
var x = $accordion.children('h3.ui-accordion-header:not(ui-state-disabled):'
+ next + '(' + activePanel + '):first');
if (x.length == 0) {
x = $accordion.children('h3.ui-accordion-header:not(ui-state-disabled):'
+ prev + '(' + activePanel + '):last');
}
$accordion.accordion('option', 'active', (x.index() > 0) ? x.index() - 1 : x.index());
}
},
var bestellvorgang = {
$accordion: null,
init: function () {
this.cacheDom();
this.bindEvent();
$accordion.accordion();
},
cacheDom: function () {
$accordion = $('#accordion');
$btnTabControl = $accordion.find('button[name=tab-control]');
$productSelect = $accordion.find('#productSelect');
},
bindEvent: function () {
$btnTabControl.on('click', this.controllTab.bind(this));
$productSelect.on('change', this.productSelect.bind(this));
},
controllTab: function(event, $next=1, $previous=1) {
event.preventDefault();
var delta = $(event.currentTarget).is('.next') ? $next : -$previous;
$accordion.accordion('option', 'active', ($accordion.accordion('option', 'active')) + delta);
var next = 'gt';
var prev = 'lt';
if (event.target.textContent.trim().toLowerCase() == 'previous') {
next = 'lt';
prev = 'gt';
}
var activePanel = $accordion.accordion('option', 'active');
if ($accordion.children('h3.ui-accordion-header').eq(activePanel).is('.ui-state-disabled')) {
var x = $accordion.children('h3.ui-accordion-header:not(ui-state-disabled):' + next + '(' + activePanel + '):first');
if (x.length == 0) {
x = $accordion.children('h3.ui-accordion-header:not(ui-state-disabled):' + prev + '(' + activePanel + '):last');
}
$accordion.accordion('option', 'active', (x.index() > 0) ? x.index() - 1 : x.index());
}
},
productSelect: function (event) {
$selected = event.currentTarget.value;
switch ($selected) {
case 'p4':
$('#ui-id-3, #ui-id-5').addClass('ui-state-disabled');
this.controllTab(event, $next=3, $previous=3);
break;
case 'p5':
$('#ui-id-3, #ui-id-5').addClass('ui-state-disabled');
break;
default:
$('#ui-id-3, #ui-id-5').removeClass('ui-state-disabled');
}
}
};<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
<label for="productSelect">Choose a Product:</label>
<select id="productSelect">
<option value="p1">Product 1</option>
<option value="p2">Product 2</option>
<option value="p3">Product 3</option>
<option value="p4">Product 4</option>
<option value="p5">Product 5</option>
</select>
<br><br>
<button type="button" name="tab-control" class="btn btn-success pull-right next">Next <span
class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span></button>
</div>
<h3>Section 2</h3>
<div>
<button type="button" name="tab-control" class="btn btn-info pull-right previous">Previous <span
class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span></button>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
<button type="button" name="tab-control" class="btn btn-success pull-right next">Next <span
class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span></button>
</div>
<h3>Section 3</h3>
<div>
<button type="button" name="tab-control" class="btn btn-info pull-right previous">Previous <span
class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span></button>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<button type="button" name="tab-control" class="btn btn-success pull-right next">Next <span
class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span></button>
</div>
<h3>Section 4</h3>
<div>
<button type="button" name="tab-control" class="btn btn-info pull-right previous">Previous <span
class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span></button>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
</div>
</div>