javascript - Bootstrap Wizard 下一个选项卡上的图像单击并捕获值

Question

我有一个带有 Twitter Bootstrap 向导 的表单，我有几个图像，当我选择一个时，我必须在本地存储值并转到下一个选项卡 (o._nextTab).

当我单击图像时，它应该转到下一个选项卡，但目前无法正常工作。

思路是这样的:

(function($) {
"use strict";
var sdm = function() {
    var o = this; 
    $(document).ready(function() {
        o.initialize();
    });
};
var p = sdm.prototype;
p.initialize = function() {
  this._initChartWizard();
};


//Chart Wizard form
p._initChartWizard = function () {
  var o = this;
  $('#chartwizard').bootstrapWizard({
    onTabShow: function (tab, navigation, index) {
      o._handleTabShow(tab, navigation, index, $('#chartwizard'));
      o._nextTab(o);
    }
  });

  $('#chartwizard').bootstrapWizard({ 'nextSelector': '.chartOption' });

}

p._handleTabShow = function (tab, navigation, index, wizard) {
  var total = navigation.find('li').length;
  var current = index + 0;
  var percent = (current / (total - 1)) * 100;
  var percentWidth = 100 - (100 / total) + '%';

  navigation.find('li').removeClass('done');
  navigation.find('li.active').prevAll().addClass('done');

  wizard.find('.progress-bar').css({ width: percent + '%' });
  $('.form-wizard-horizontal').find('.progress').css({ 'width': percentWidth });
}

p._nextTab = function(wizard) {
  $('.nextT').click(function(){
    wizard('next');
  });
}

window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):

会有几张图片，我想点击图片并转到下一个选项卡，或者至少选择图片，然后当我点击下一步时获取值。

我正在使用 pyjade 来创建模板，所以如果有任何想法或使用 javascript，将受到欢迎。

<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
  <div class="form-wizard-nav">
    <div class="progress">
      <div class="progress-bar progress-bar-primary"></div>
    </div>
    <ul class="nav nav-justified">
      <li class="active"><a href="#tab1" data-toggle="tab"><span class="step">1</span><span class="title">Chart Type</span></a>
      </li>
      <li><a href="#tab2" data-toggle="tab"><span class="step">2</span><span class="title">Data Source</span></a>
      </li>
      <li><a href="#tab3" data-toggle="tab"><span class="step">3</span><span class="title">Data</span></a>
      </li>
      <li><a href="#tab4" data-toggle="tab"><span class="step">4</span><span class="title">Chart Options</span></a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
      <div class="row">
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body chartOption nexT"><a href="javascript:void(0);"><img src="static/assets/img/business-bars-graphic.png" class="img-responsive"/></a>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body"><a href="javascript:void(0);"><img src="static/assets/img/business-chart.png" class="img-responsive"/></a>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body"><a href="javascript:void(0);"><img src="static/assets/img/business-financial-chart (1).png" class="img-responsive"/></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tab2" class="tab-pane"><br/><br/>
      <p>Tab 2</p>
    </div>
    <div id="tab3" class="tab-pane"><br/><br/>
      <p>Tab 3</p>
    </div>
    <div id="tab4" class="tab-pane"><br/><br/>
      <p>Tab 4</p>
    </div>
  </div>
  <div class="pager wizard">
    <li class="previous first"><a href="javascript:void(0);">First</a>
    </li>
    <li class="previous"><a href="javascript:void(0);">Previous</a>
    </li>
    <li class="next last"><a href="javascript:void(0);">Last</a>
    </li>
    <li class="next"><a href="javascript:void(0);">Next</a>
    </li>
  </div>
</form>
</div>

Answer 1

我已将 onclick="seltab(this); 添加到每个图像，点击后会转到相应的选项卡并捕获点击的内容。

(function($) {
  "use strict";
  var sdm = function() {
    var o = this;
    $(document).ready(function() {
      o.initialize();
    });
  };
  var p = sdm.prototype;
  p.initialize = function() {
    this._initChartWizard();
  };


  //Chart Wizard form
  p._initChartWizard = function() {
    var o = this;
    $('#chartwizard').bootstrapWizard({
      onTabShow: function(tab, navigation, index) {
        o._handleTabShow(tab, navigation, index, $('#chartwizard'));
        o._nextTab(o);
      }
    });

    $('#chartwizard').bootstrapWizard({
      'nextSelector': '.chartOption'
    });

  }

  p._handleTabShow = function(tab, navigation, index, wizard) {
    var total = navigation.find('li').length;
    var current = index + 0;
    var percent = (current / (total - 1)) * 100;
    var percentWidth = 100 - (100 / total) + '%';

    navigation.find('li').removeClass('done');
    navigation.find('li.active').prevAll().addClass('done');

    wizard.find('.progress-bar').css({
      width: percent + '%'
    });
    $('.form-wizard-horizontal').find('.progress').css({
      'width': percentWidth
    });
  }

  p._nextTab = function(wizard) {
    $('.nextT').click(function() {
      wizard('next');
    });
  }

  window.boostbox = window.boostbox || {};
  window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):

function seltab(obj) {
  var elem = obj.getAttribute('datahref')
  var click_img = obj.firstChild.getAttribute('src')
  var justifiedElems = document.getElementsByClassName('nav-justified')[0].getElementsByTagName("li");
  for (var i = 0; i < justifiedElems.length; i++) {
    if (justifiedElems[i].firstChild.getAttribute('href') == '#' + elem) {
      justifiedElems[i].firstChild.click()
    }
  }
  console.log("You Clicked " + click_img + " " + elem)
}

<link rel="stylesheet" href="//vinceg.github.io/twitter-bootstrap-wizard/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="//vinceg.github.io/twitter-bootstrap-wizard/prettify.css">
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/bootstrap/js/bootstrap.min.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/prettify.js"></script>


<form role="form" id="chartwizard" novalidate="novalidate" class="form-horizontal form-bordered">
  <div class="form-wizard-nav">
    <div class="progress">
      <div class="progress-bar progress-bar-primary"></div>
    </div>
    <ul class="nav nav-justified">
      <li class="active"><a href="#tab1" data-toggle="tab"><span class="step"></span><span class="title">Chart Type</span></a>
      </li>
      <li><a href="#tab2" data-toggle="tab"><span class="step"></span><span class="title">Data Source</span></a>
      </li>
      <li><a href="#tab3" data-toggle="tab"><span class="step"></span><span class="title">Data</span></a>
      </li>
      <li><a href="#tab4" data-toggle="tab"><span class="step"></span><span class="title">Chart Options</span></a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
      <div class="row">
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body chartOption nexT">
              <a href="javascript:void(0);" onclick="seltab(this); return false;" datahref="tab2"><img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></a>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body">
              <a href="javascript:void(0);" onclick="seltab(this); return false;" datahref="tab3"><img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></a>
            </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="box">
            <div class="box-body">
              <a href="javascript:void(0);" onclick="seltab(this); return false;" datahref="tab4"><img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tab2" class="tab-pane">

      <div align="center">
        tab2
        <img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
    </div>
    <div id="tab3" class="tab-pane">

      <div align="center">
        tab3
        <img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
    </div>
    <div id="tab4" class="tab-pane">
      <div align="center">
        tab4
        <img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
    </div>
  </div>
  <div class="pager wizard">
    <li class="previous first"><a href="javascript:void(0);">First</a>
    </li>
    <li class="previous"><a href="javascript:void(0);">Previous</a>
    </li>
    <li class="next last"><a href="javascript:void(0);">Last</a>
    </li>
    <li class="next"><a href="javascript:void(0);">Next</a>
    </li>
  </div>
</form>

这里我假设三个图像对应三个标签