首页 \ 问答 \ 使用javascript获取选定的行值(Get selected row value using javascript)

使用javascript获取选定的行值(Get selected row value using javascript)

 我已经在html按钮上单击动态添加表格。 添加teamname，teamid，单选按钮。 
 

 HTML属性： 
 

<input type="button" value="Generate a table." onclick="generate_table()">

 

 Javascript功能： 
 

function generate_table() 
{
    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    var teamrecord = "test";
    for (var i = 0; i <  teamrecord.length; i++) {
        var row = document.createElement("tr");

        var cell = document.createElement("td");
        var cell1 = document.createElement("td");
        var cell2 = document.createElement("td");

        var cellText = document.createTextNode("teamrecord");
        var cellId = document.createTextNode("teamid");
        var radio = document.createElement("INPUT");
        radio.setAttribute("type", "radio");
        radio.setAttribute("name", "radio");


        cell.appendChild(cellText);
        cell1.appendChild(cellId);
        cell2.appendChild(radio);

        row.appendChild(cell);
        row.appendChild(cell1);
        row.appendChild(cell2);

        tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    body.appendChild(tbl);

}

 

 按钮单击将生成4行3列，现在我需要单击单选按钮获取详细信息。 
 

 如果我从第一行中选择单选按钮，我需要在警告框中显示teamid？ 我怎样才能在javascript中实现这一点？ 

I have dynamically add the table on html button click. Add the teamname,teamid,radio button.
 

HTML attributes:
 

<input type="button" value="Generate a table." onclick="generate_table()">

 

Javascript function :
 

function generate_table() 
{
    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    var teamrecord = "test";
    for (var i = 0; i <  teamrecord.length; i++) {
        var row = document.createElement("tr");

        var cell = document.createElement("td");
        var cell1 = document.createElement("td");
        var cell2 = document.createElement("td");

        var cellText = document.createTextNode("teamrecord");
        var cellId = document.createTextNode("teamid");
        var radio = document.createElement("INPUT");
        radio.setAttribute("type", "radio");
        radio.setAttribute("name", "radio");


        cell.appendChild(cellText);
        cell1.appendChild(cellId);
        cell2.appendChild(radio);

        row.appendChild(cell);
        row.appendChild(cell1);
        row.appendChild(cell2);

        tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    body.appendChild(tbl);

}

 

4 rows with 3 columns will generate on the button click , Now i need to get the details on the radio button click. 
 

If i select the radio button from the first row i need to show the teamid in alert box? how can I achieve this in javascript?

原文：https://stackoverflow.com/questions/40127895
更新时间：2024-03-19 19:03

最满意答案

 试试这个codepen 
 

 

 
 
 
  
$(document).ready(function() { 

	(function ($) { 
		$('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
		
		$('.tab ul.tabs li a').click(function (g) { 
			var tab = $(this).closest('.tab'), 
				index = $(this).closest('li').index();
      console.log(tab + ' ' + index); 
			
			tab.find('ul.tabs > li').removeClass('current');
			$(this).closest('li').addClass('current');
			
			tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
			tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
			
			g.preventDefault();
		} );
	})(jQuery);

});

var tabsFn = (function() {
  
  function init() {
    setHeight();
  }
  
  function setHeight() {
    var $tabPane = $('.tab-pane'),
        tabsHeight = $('.nav-tabs').height();
    
    $tabPane.css({
      height: tabsHeight
    });
  }
    
  $(init);
})();
 
  
@import url(http://fonts.googleapis.com/css?family=Roboto:300);
.tab {
  padding-top: 50px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  background: #fff;
  width: 100%;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  font-weight: 300;
  color: #888;
  -webkit-font-smoothing: antialiased;
}

.tabs {
  display: table;
  position: relative;
  overflow: hidden;
  margin: 0;
  width: 100%;
}
.tabs li {
  float: left;
  line-height: 38px;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.tabs a {
  background-color: #eff0f2;
  border-bottom: 1px solid #fff;
  color: #888;
  font-weight: 500;
  display: block;
  letter-spacing: 0;
  outline: none;
  padding: 0 20px;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border-bottom: 2px solid #87d3b7;
}

.tabs_item {
  display: none;
  padding: 30px 0;
}
.tabs_item h4 {
  font-weight: bold;
  color: #87d3b7;
  font-size: 20px;
}
.tabs_item img {
  width: 200px;
  float: left;
  margin-right: 30px;
}
.tabs_item:first-child {
  display: block;
}

.current a {
  color: #fff;
  background: #87d3b7;
}

body {
  background-color: #ddd;
}

h3 {
  margin-top: 0;
}

.badge {
  background-color: #777;
}

.tabs-left {
  margin-top: 3rem;
}

.nav-tabs {
  float: left;
  border-bottom: 0;
}
.nav-tabs li {
  float: none;
  margin: 0;
}
.nav-tabs li a {
  margin-right: 0;
  border: 0;
  background-color: #333;
}
.nav-tabs li a:hover {
  background-color: #444;
}
.nav-tabs .glyphicon {
  color: #fff;
}
.nav-tabs .active .glyphicon {
  color: #333;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  border: 0;
}

.tab-content {
  margin-left: 45px;
}
.tab-content .tab-pane {
  display: none;
  background-color: #fff;
  padding: 1.6rem;
  overflow-y: auto;
}
.tab-content .active {
  display: block;
}

.list-group {
  width: 100%;
}
.list-group .list-group-item {
  height: 50px;
}
.list-group .list-group-item h4, .list-group .list-group-item span {
  line-height: 11px;
}
 
  
<div class="tab">
  
	<ul class="tabs">
		<li><a href="#">Tab01</a></li>
		<li><a href="#">Tab02</a></li>
		<li><a href="#">Tab03</a></li>
	</ul> <!-- / tabs -->

	<div class="tab_content">

		<div class="tabs_item">
	      <div class="container">
	        <div class="row">
	          <div class="col-md-12">
	            <div class="tabs-left">
	              <ul class="nav nav-tabs">
	                <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
	                <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
	                <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
	                <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
	                <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
	                <li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
	              </ul>
	              <div class="tab-content">
	                <div class="tab-pane active" id="a">
	                  <h3>Who do you Love?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Jen &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="b">
	                  <h3>What's your Favorite?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Crystals &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="c">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="d">Aliquam in felis sit amet augue.</div>
	                <div class="tab-pane" id="e">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="f">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	              </div><!-- /tab-content -->
	            </div><!-- /tabbable -->
	          </div><!-- /col -->
	        </div><!-- /row -->
	      </div><!-- /container -->
		</div> <!-- / tabs_item -->

		<div class="tabs_item">
	      <div class="container">
	        <div class="row">
	          <div class="col-md-12">
	            <div class="tabs-left">
	              <ul class="nav nav-tabs">
	                <li class="active"><a href="#a1" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
	                <li><a href="#b1" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
	                <li><a href="#c1" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
	                <li><a href="#d1" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
	                <li><a href="#e1" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
	                <li><a href="#f1" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
	              </ul>
	              <div class="tab-content">
	                <div class="tab-pane active" id="a1">
	                  <h3>Who do you Love?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Jen &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="b1">
	                  <h3>What's your Favorite?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Crystals &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="c1">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="d1">Aliquam in felis sit amet augue.</div>
	                <div class="tab-pane" id="e1">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="f1">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	              </div><!-- /tab-content -->
	            </div><!-- /tabbable -->
	          </div><!-- /col -->
	        </div><!-- /row -->
	      </div><!-- /container -->
		</div> <!-- / tabs_item -->

		<div class="tabs_item">
	      <div class="container">
	        <div class="row">
	          <div class="col-md-12">
	            <div class="tabs-left">
	              <ul class="nav nav-tabs">
	                <li class="active"><a href="#a2" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
	                <li><a href="#b2" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
	                <li><a href="#c2" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
	                <li><a href="#d2" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
	                <li><a href="#e2" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
	                <li><a href="#f2" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
	              </ul>
	              <div class="tab-content">
	                <div class="tab-pane active" id="a2">
	                  <h3>Who do you Love?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Jen &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="b2">
	                  <h3>What's your Favorite?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Crystals &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="c2">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="d2">Aliquam in felis sit amet augue.</div>
	                <div class="tab-pane" id="e2">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="f2">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	              </div><!-- /tab-content -->
	            </div><!-- /tabbable -->
	          </div><!-- /col -->
	        </div><!-- /row -->
	      </div><!-- /container -->
		</div> <!-- / tabs_item -->
		
	</div> <!-- / tab_content -->
</div> <!-- / tab -->
 
 
 

 


Try with this codepen
 

 

 
 
 
  
$(document).ready(function() { 

	(function ($) { 
		$('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
		
		$('.tab ul.tabs li a').click(function (g) { 
			var tab = $(this).closest('.tab'), 
				index = $(this).closest('li').index();
      console.log(tab + ' ' + index); 
			
			tab.find('ul.tabs > li').removeClass('current');
			$(this).closest('li').addClass('current');
			
			tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
			tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
			
			g.preventDefault();
		} );
	})(jQuery);

});

var tabsFn = (function() {
  
  function init() {
    setHeight();
  }
  
  function setHeight() {
    var $tabPane = $('.tab-pane'),
        tabsHeight = $('.nav-tabs').height();
    
    $tabPane.css({
      height: tabsHeight
    });
  }
    
  $(init);
})();
 
  
@import url(http://fonts.googleapis.com/css?family=Roboto:300);
.tab {
  padding-top: 50px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  background: #fff;
  width: 100%;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  font-weight: 300;
  color: #888;
  -webkit-font-smoothing: antialiased;
}

.tabs {
  display: table;
  position: relative;
  overflow: hidden;
  margin: 0;
  width: 100%;
}
.tabs li {
  float: left;
  line-height: 38px;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.tabs a {
  background-color: #eff0f2;
  border-bottom: 1px solid #fff;
  color: #888;
  font-weight: 500;
  display: block;
  letter-spacing: 0;
  outline: none;
  padding: 0 20px;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border-bottom: 2px solid #87d3b7;
}

.tabs_item {
  display: none;
  padding: 30px 0;
}
.tabs_item h4 {
  font-weight: bold;
  color: #87d3b7;
  font-size: 20px;
}
.tabs_item img {
  width: 200px;
  float: left;
  margin-right: 30px;
}
.tabs_item:first-child {
  display: block;
}

.current a {
  color: #fff;
  background: #87d3b7;
}

body {
  background-color: #ddd;
}

h3 {
  margin-top: 0;
}

.badge {
  background-color: #777;
}

.tabs-left {
  margin-top: 3rem;
}

.nav-tabs {
  float: left;
  border-bottom: 0;
}
.nav-tabs li {
  float: none;
  margin: 0;
}
.nav-tabs li a {
  margin-right: 0;
  border: 0;
  background-color: #333;
}
.nav-tabs li a:hover {
  background-color: #444;
}
.nav-tabs .glyphicon {
  color: #fff;
}
.nav-tabs .active .glyphicon {
  color: #333;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  border: 0;
}

.tab-content {
  margin-left: 45px;
}
.tab-content .tab-pane {
  display: none;
  background-color: #fff;
  padding: 1.6rem;
  overflow-y: auto;
}
.tab-content .active {
  display: block;
}

.list-group {
  width: 100%;
}
.list-group .list-group-item {
  height: 50px;
}
.list-group .list-group-item h4, .list-group .list-group-item span {
  line-height: 11px;
}
 
  
<div class="tab">
  
	<ul class="tabs">
		<li><a href="#">Tab01</a></li>
		<li><a href="#">Tab02</a></li>
		<li><a href="#">Tab03</a></li>
	</ul> <!-- / tabs -->

	<div class="tab_content">

		<div class="tabs_item">
	      <div class="container">
	        <div class="row">
	          <div class="col-md-12">
	            <div class="tabs-left">
	              <ul class="nav nav-tabs">
	                <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
	                <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
	                <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
	                <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
	                <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
	                <li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
	              </ul>
	              <div class="tab-content">
	                <div class="tab-pane active" id="a">
	                  <h3>Who do you Love?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Jen &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="b">
	                  <h3>What's your Favorite?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Crystals &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="c">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="d">Aliquam in felis sit amet augue.</div>
	                <div class="tab-pane" id="e">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="f">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	              </div><!-- /tab-content -->
	            </div><!-- /tabbable -->
	          </div><!-- /col -->
	        </div><!-- /row -->
	      </div><!-- /container -->
		</div> <!-- / tabs_item -->

		<div class="tabs_item">
	      <div class="container">
	        <div class="row">
	          <div class="col-md-12">
	            <div class="tabs-left">
	              <ul class="nav nav-tabs">
	                <li class="active"><a href="#a1" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
	                <li><a href="#b1" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
	                <li><a href="#c1" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
	                <li><a href="#d1" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
	                <li><a href="#e1" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
	                <li><a href="#f1" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
	              </ul>
	              <div class="tab-content">
	                <div class="tab-pane active" id="a1">
	                  <h3>Who do you Love?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Jen &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="b1">
	                  <h3>What's your Favorite?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Crystals &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="c1">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="d1">Aliquam in felis sit amet augue.</div>
	                <div class="tab-pane" id="e1">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="f1">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	              </div><!-- /tab-content -->
	            </div><!-- /tabbable -->
	          </div><!-- /col -->
	        </div><!-- /row -->
	      </div><!-- /container -->
		</div> <!-- / tabs_item -->

		<div class="tabs_item">
	      <div class="container">
	        <div class="row">
	          <div class="col-md-12">
	            <div class="tabs-left">
	              <ul class="nav nav-tabs">
	                <li class="active"><a href="#a2" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
	                <li><a href="#b2" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
	                <li><a href="#c2" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
	                <li><a href="#d2" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
	                <li><a href="#e2" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
	                <li><a href="#f2" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
	              </ul>
	              <div class="tab-content">
	                <div class="tab-pane active" id="a2">
	                  <h3>Who do you Love?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Jen &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="b2">
	                  <h3>What's your Favorite?</h3>
	                  <ul class="list-group pull-left">
	                    <li class="list-group-item">
	                      <h4>Crystals &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
	                    </li>
	                  </ul>
	                </div>
	                <div class="tab-pane" id="c2">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="d2">Aliquam in felis sit amet augue.</div>
	                <div class="tab-pane" id="e2">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	                <div class="tab-pane" id="f2">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
	              </div><!-- /tab-content -->
	            </div><!-- /tabbable -->
	          </div><!-- /col -->
	        </div><!-- /row -->
	      </div><!-- /container -->
		</div> <!-- / tabs_item -->
		
	</div> <!-- / tab_content -->
</div> <!-- / tab -->

相关问答

更多

  • 左对齐标签 - 右对齐选择元素（CSS）(Left Align Label - Right Align Select Element (CSS))[2022-12-19]

    如果select元素是最高的东西，为什么不漂浮标签？ 你也可以借此机会将它变成一个标签，而不是一个div文本。 这里是CSS： #category-select { left: 0px; top: 0px; width: 350px; border: 1px solid #666; text-align: right; } #category-select label { float: left; margin: 1px; } 这里是HTML：

  • CSS不工作之前(CSS before not working)[2022-05-07]

    您可以从父项中删除z-index ，并在伪元素上使用z-index: -1 .bubble { position: relative; width: 135px; height: 135px; background-color: #666; border-radius: 75px; box-shadow: 0 0 50px 0 rgba(236, 3, 91, 0.20); } .bubble.black:before { top: 0; left: 0; ...

  • 物化CSS选择无法正常工作(materialize css select is not working properly)[2023-02-11]

    我更新了你的jsfiddle，因为它在jQuery之前加载了Materialize，所以没有定义$（）。 链接在这里： https://jsfiddle.net/007zkvut/7/ 它正常工作，就像在他们的网站上一样。 但是，查看您在问题中发布的代码以及jsfiddle中的代码，