一旦最大的球员(二守门员,六名防守队员,十二向前)在他们的每一个类别的数量已被选定,其余球员picked与类is-inactive应被设置为cursor:default
所有玩家都将该类is-inactive作为默认类别,而我正在尝试做的cursor: default只是在其他玩家被选中并且已经将他们的班级切换到之后才尝试设置is-active.
即.挑选了两个守门员,现在拥有该类is-active并cursor:pointer在悬停时采取行为.这个类别共有十名球员,其他八名守门员都is-inactive应该有这种cursor: default行为.
is-inactive仍然拥有cursor: pointer它们.player {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
vertical-align: top;
cursor: pointer;
position: relative;
}
<div class="player player--goalie year--1990">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Brian Elder</p>
<p class="tooltip__hometown"><span>Hometown:</span> Oak Lake, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1992-1997</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number …我正在更新我的旧版本gulpfile.js,以前主要用于将我的Sass编译成CSS,但现在我正在尝试让Gulp执行以下操作:
(WORKING ON)(WORKING ON)
(WORKING ON).scss或.html更改 - 完成scripts.min.js
文件,它会不断为每个新的缩小的JavaScript文件添加后缀min.index.html
gulpfile.js
package.json
.aws.json
.csscomb.json
.gitignore
assets
- css
style.css
style.scss
--partials
---base
---components
---modules
- img
- js
scripts.js
- dist
// Include Gulp
var gulp = require('gulp');
var postcss = require("gulp-postcss");
// All of your plugins …您的文件夹的首选标签方法是使用任务运行程序区分原始资产和已缩小,连接等的文件？我已经看到了一堆的组合,最流行的是的src and dist,src and build,dev and dist
我已经建立了一个互动，人们可以选择六名球员来组成他们的全明星队。当他们点击分享到 Twitter 时，我希望有一个包含所有六名球员参数的 URL，website.com/?playerName=picked?playerName=picked这样人们就可以分享他们的球队
更新#2:更新了脚本.
a)用户选择一个按钮.单击最后一个按钮的值+ .current__amount=new__amount
b)没有总计.再次单击同一按钮应该取消选择它,然后从中减去该值,.new__amount然后使用更改占位符文本.html()
是的,现在无论出于何种原因,单击按钮不会添加或删除其值.new__amount.
我已经console.log(buttons[i].value)并且console.log(buttons[i].class)可以看到for循环正在打印类和这六个按钮的值,这些按钮表示在无声拍卖中的出价,$10, 25, 50并且已经存储在一个名为的数组中var buttons = [],就像我想要的那样.
差不多了.只需要做到这一点,一次只能选择一个按钮.
/*-------------------------------------
STEP ONE: PLACE BID
--------------------------------------*/
$.ajax({
url: "https://sheetsu.com/apis/4a8eceba",
method: "GET",
dataType: "json"
}).then(function(spreadsheet) {
// Print current bid
var currentBid = spreadsheet.result.pop().Bids;
$(".current__amount").html("$" +currentBid);
$('.button__form').on('click', function() {
var value = $(this).val();
if($(this).hasClass('is-selected')) {
$(this).removeClass('is-selected');
$(".check--one").css("color", "#ccc");
currentBid = parseInt(currentBid) - parseInt(value);
}
else {
$(this).addClass('is-selected');
$(".check--one").css("color", "#ffdc00"); …picked.is-active单击时不应将任何类添加到任何输入字段中在这里添加了到Github回购的链接:https://github.com/onlyandrewn/wheatkings
添加了片段,其中显示了如何切换is-inactive和is-active切换类.
我删除了可能引起一些混淆的第二个片段
下面的这个Javascript片段抓取了点击的玩家的名字,然后将其放入输入字段,如果它有一个类picked.is-active.但是,假设您已经选择了两个守门员,但是当未被选中(具有默认类别in-active)时,点击该类别中剩下的两个守门员,这些未被选中的玩家仍然被添加到输入中,这不是我们想要的.
$(".player").on("click", function(){
var playerNames = [];
$("input:text").each(function(i, t) { playerNames.push(t.value) });
if ($(this).find("picked.is-active")) {
var playerName = $(this).find(".player__name").html();
var index = playerNames.indexOf(playerName);
if(index == -1) // add player
$("input:text:eq(" + playerNames.indexOf("") + ")").val(playerName);
else // remove player
$("input:text:eq(" + index + ")").val("");
} else {
$("input").val("");
}
});
is-inactive和is-active …每个职位的最大玩家人数为:
我已经达到了点击曲棍球运动员的地步,并且该名称被添加到表格中的输入字段,但是如果你已经选择了两个守门员,即有一个类,is-active然后点击其中一个其他两个具有默认is-inactive类的未选择的玩家,当最多只有两个守门员时,该名称仍会被添加到输入中.不幸的是,防守队员和前锋也是如此.
当starredGoaltenders === maxGoaltenders或者starredDefencemen === maxDefencemen或starredForwards === maxFowards那的球员的名字不未被选择的特定位置,并且不具有is-active类不应该被添加到表单中任何输入.
function countSelected() {
$(".player").on("click", function(){
// Checks if the maximum number of players have been selected
// If so, return false and then do nothing
// If not, the class will toggle from `is-inactive` to `is-active`
if ($(this).find(".picked.is-inactive.full").length > 0) return false;
$(this).find(".picked").toggleClass("is-inactive is-active");
$(".player").removeClass("not-picked");
$(".player").not(":has(.is-active)").addClass("not-picked");
// Count the …我正在使用Datatables,我正在尝试访问另一列中的数据.我不清楚我是否应该使用columns.data或者是否应该通过使用获取列索引来采用另一种方法？
makeSlug(data)引用"data": "district"第一个和第二个渲染函数保持相同和引用"data": "school""columns": [
{ "data": "district",
"render": function (data, type, row, meta) {
return '<a href="/schools/' + makeSlug(data) + '">' + data + '</a>';
}
},
{ "data": "school",
"render": function (data, type, row, meta) {
return '<a href="/schools/' + makeSlug(data) + '/' + makeSlug(data) + '">' + data + '</a>';
}
},
{ "data": "subject"},
{ "data": "rate"},
{ "data": "test_takers"}
],
我有一个按钮列表.当其中一个被点击时,我想给所有其他按钮一个类not-selected,它将文本的颜色改为灰色并使指针事件:无
我正在使用点击处理程序,不确定我是否使用感叹号!是正确的,因为它继续将该类添加到我刚刚单击的按钮而不是所有未单击的按钮.
$(".btn--list").on("click", function(){
!($(this).addClass("not-selected"));
)};
<ul>
<li><h2>Filters</h2></li>
<li class="filter--all"><button class="btn--list btn--all is-selected">Select All</button></li>
<li><h2>Decade</h2></li>
<li><button class="btn--list btn--1960">1960s</button></li>
<li><button class="btn--list btn--1970">1970s</button></li>
<li><button class="btn--list btn--1980">1980s</button></li>
<li><button class="btn--list btn--1990">1990s</button></li>
<li><button class="btn--list btn--2000">2000s</button></li>
<li><button class="btn--list btn--2010">2010s</button></li>
<li><h2>Position</h2></li>
<li><button class="btn--list btn--goalie">Goalie</button></li>
<li><button class="btn--list btn--defencemen">Defenceman</button></li>
<li><button class="btn--list btn--forward">Forward</button></li>
<li><h2>Other</h2></li>
<li><button class="btn--list btn--name">First Name</button></li>
<li><button class="btn--list btn--hometown">Hometown</button></li>
<li><button class="btn--list btn--gamesp">Games Played</button></li>
<li class="not--goalie not--goals"><button class="btn--list btn--goals">Goals</button></li>
<li class="not--goalie not-assists"><button class="btn--list btn--assists">Assists</button></li>
<li class="not--goalie not-points"><button class="btn--list btn--points">Points</button></li>
<li class="not--goalie not-penalty"><button class="btn--list btn--penalty">Penalty Minutes</button></li> …slider.html当前没有在上次更新后提取内容.Slider.html是随机的; 但是,我有四个相同的故事,网址不再适用于他们相应的详细视图页面了.{% for random_article in random_articles %}
<div class="slider">
<div class="group visible">
<div class="sliderItem">
<a href="{%url "detailed" slug=random_article.slug %}"><img src="{{random_article.relatedImage}}" alt="" class="sliderPicture"></a>
<a href="{%url "detailed" slug=random_article.slug %}"><p class="related">{{random_article.title}}</p></a>
</div><!-- /.sliderItem -->
</div><!-- /.group -->
</div><!-- /.slider -->
{% endfor %}
NoReverseMatch at /last-us
Reverse for 'detailed' with arguments '()' and keyword arguments '{u'slug': ''}' not found. 1 pattern(s) tried: ['(?P<slug>\\S+)']
from django.conf.urls import patterns, url
from . …查看我的代码,包含if/else语句的部分完全按照我希望的方式工作scripts.js,但它并不是解决问题的最有效方法.
我有一个小导航(左侧),显示七个宠物名称.被收养的宠物总数是四十.当用户向下滚动页面时,导航中包含宠物名称的HTML和链接在每七只宠物之后发生变化.
(You may have to expand the "Result" window to see the small navigation)
$(function(){
/*-------------------------------------
TABLETOP.JS
--------------------------------------*/
var public_spreadsheet_url = "https://docs.google.com/spreadsheets/d/1TOIGfwdi1GhV7BMhc5fH481icHi7zEEyXZZx3Y5J61I/pubhtml";
$(document).ready( function() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
parseNumbers: true } );
});
function showInfo(data, tabletop) {
var source = $("#pets").html();
var template = Handlebars.compile(source);
// The actual name of the sheet, not entire .csv
$.each(tabletop.sheets("Pets").all(), function(i, fact) {
var html = template(fact);
// You need …我有一系列的一系列图片,.player__headshot现在它正在淡化图像被淹没而不是系列中的其他59个图像.
<div class="player player--goalie">
<div class="player__headshot player--elder">
<div class="picked is-active">
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
$(".player__headshot").on("mouseover", function(){
$(this).css("opacity", 0.25);
});
$(".player__headshot").on("mouseout", function(){
$(this).css("opacity", 1);
});