셀렉트박스로 클래스추가 질문드립니다.
본문
주소 :http://wnghks2516.cafe24.com/index2.php
<meta charset="utf-8">
<select id="change_theme">
<option value="day_three">day_three</option>
<option value="night_three">night_three</option>
<option value="abcdef">abcdef</option>
<option value="ambiance">ambiance</option>
<option value="ambiance-mobile">ambiance-mobile</option>
<option value="ayu-dark">ayu-dark</option>
<option value="ayu-mirage">ayu-mirage</option>
<option value="base16-dark">base16-dark</option>
<option value="base16-light">base16-light</option>
<option value="bespin">bespin</option>
<option value="blackboard">blackboard</option>
<option value="cobalt">cobalt</option>
<option value="colorforth">colorforth</option>
<option value="darcula">darcula</option>
<option value="dracula">dracula</option>
<option value="duotone-dark">duotone-dark</option>
<option value="duotone-light">duotone-light</option>
<option value="eclipse">eclipse</option>
<option value="elegant">elegant</option>
<option value="erlang-dark">erlang-dark</option>
<option value="gruvbox-dark">gruvbox-dark</option>
<option value="hopscotch">hopscotch</option>
<option value="icecoder">icecoder</option>
<option value="idea">idea</option>
<option value="isotope">isotope</option>
<option value="lesser-dark">lesser-dark</option>
<option value="liquibyte">liquibyte</option>
<option value="lucario">lucario</option>
<option value="material">material</option>
<option value="material-darker">material-darker</option>
<option value="material-ocean">material-ocean</option>
<option value="material-palenight">material-palenight</option>
<option value="mbo">mbo</option>
<option value="mdn-like">mdn-like</option>
<option value="midnight">midnight</option>
<option value="monokai">monokai</option>
<option value="moxer">moxer</option>
<option value="neat">neat</option>
<option value="neo">neo</option>
<option value="night">night</option>
<option value="nord">nord</option>
<option value="oceanic-next">oceanic-next</option>
<option value="panda-syntax">panda-syntax</option>
<option value="paraiso-dark">paraiso-dark</option>
<option value="paraiso-light">paraiso-light</option>
<option value="pastel-on-dark">pastel-on-dark</option>
<option value="railscasts">railscasts</option>
<option value="rubyblue">rubyblue</option>
<option value="seti">seti</option>
<option value="shadowfox">shadowfox</option>
<option value="solarized">solarized</option>
<option value="ssms">ssms</option>
<option value="the-matrix">the-matrix</option>
<option value="tomorrow-night-bright">tomorrow-night-bright</option>
<option value="tomorrow-night-eighties">tomorrow-night-eighties</option>
<option value="ttcn">ttcn</option>
<option value="twilight">twilight</option>
<option value="vibrant-ink">vibrant-ink</option>
<option value="xq-dark">xq-dark</option>
<option value="xq-light">xq-light</option>
<option value="yeti">yeti</option>
<option value="yonce">yonce</option>
<option value="zenburn">zenburn</option>
</select>
<link rel="stylesheet" href="/theme/day_three.css"><!-- theme -->
<link rel="stylesheet" href="/theme/night_three.css"><!-- theme -->
<link rel="stylesheet" href="/theme/abcdef.css"><!-- theme -->
<link rel="stylesheet" href="/theme/ambiance.css"><!-- theme -->
<link rel="stylesheet" href="/theme/ambiance-mobile.css"><!-- theme -->
<link rel="stylesheet" href="/theme/ayu-dark.css"><!-- theme -->
<link rel="stylesheet" href="/theme/ayu-mirage.css"><!-- theme -->
<link rel="stylesheet" href="/theme/base16-dark.css"><!-- theme -->
<link rel="stylesheet" href="/theme/base16-light.css"><!-- theme -->
<link rel="stylesheet" href="/theme/bespin.css"><!-- theme -->
<link rel="stylesheet" href="/theme/blackboard.css"><!-- theme -->
<link rel="stylesheet" href="/theme/cobalt.css"><!-- theme -->
<link rel="stylesheet" href="/theme/colorforth.css"><!-- theme -->
<link rel="stylesheet" href="/theme/darcula.css"><!-- theme -->
<link rel="stylesheet" href="/theme/dracula.css"><!-- theme -->
<link rel="stylesheet" href="/theme/duotone-dark.css"><!-- theme -->
<link rel="stylesheet" href="/theme/duotone-light.css"><!-- theme -->
<link rel="stylesheet" href="/theme/eclipse.css"><!-- theme -->
<link rel="stylesheet" href="/theme/elegant.css"><!-- theme -->
<link rel="stylesheet" href="/theme/erlang-dark.css"><!-- theme -->
<link rel="stylesheet" href="/theme/gruvbox-dark.css"><!-- theme -->
<link rel="stylesheet" href="/theme/hopscotch.css"><!-- theme -->
<link rel="stylesheet" href="/theme/icecoder.css"><!-- theme -->
<link rel="stylesheet" href="/theme/idea.css"><!-- theme -->
<link rel="stylesheet" href="/theme/isotope.css"><!-- theme -->
<link rel="stylesheet" href="/theme/lesser-dark.css"><!-- theme -->
<link rel="stylesheet" href="/theme/liquibyte.css"><!-- theme -->
<link rel="stylesheet" href="/theme/lucario.css"><!-- theme -->
<link rel="stylesheet" href="/theme/material.css"><!-- theme -->
<link rel="stylesheet" href="/theme/material-darker.css"><!-- theme -->
<link rel="stylesheet" href="/theme/material-ocean.css"><!-- theme -->
<link rel="stylesheet" href="/theme/material-palenight.css"><!-- theme -->
<link rel="stylesheet" href="/theme/mbo.css"><!-- theme -->
<link rel="stylesheet" href="/theme/mdn-like.css"><!-- theme -->
<link rel="stylesheet" href="/theme/midnight.css"><!-- theme -->
<link rel="stylesheet" href="/theme/monokai.css"><!-- theme -->
<link rel="stylesheet" href="/theme/moxer.css"><!-- theme -->
<link rel="stylesheet" href="/theme/neat.css"><!-- theme -->
<link rel="stylesheet" href="/theme/neo.css"><!-- theme -->
<link rel="stylesheet" href="/theme/night.css"><!-- theme -->
<link rel="stylesheet" href="/theme/nord.css"><!-- theme -->
<link rel="stylesheet" href="/theme/oceanic-next.css"><!-- theme -->
<link rel="stylesheet" href="/theme/panda-syntax.css"><!-- theme -->
<link rel="stylesheet" href="/theme/paraiso-dark.css"><!-- theme -->
<link rel="stylesheet" href="/theme/paraiso-light.css"><!-- theme -->
<link rel="stylesheet" href="/theme/pastel-on-dark.css"><!-- theme -->
<link rel="stylesheet" href="/theme/railscasts.css"><!-- theme -->
<link rel="stylesheet" href="/theme/rubyblue.css"><!-- theme -->
<link rel="stylesheet" href="/theme/seti.css"><!-- theme -->
<link rel="stylesheet" href="/theme/shadowfox.css"><!-- theme -->
<link rel="stylesheet" href="/theme/solarized.css"><!-- theme -->
<link rel="stylesheet" href="/theme/ssms.css"><!-- theme -->
<link rel="stylesheet" href="/theme/the-matrix.css"><!-- theme -->
<link rel="stylesheet" href="/theme/tomorrow-night-bright.css"><!-- theme -->
<link rel="stylesheet" href="/theme/tomorrow-night-eighties.css"><!-- theme -->
<link rel="stylesheet" href="/theme/ttcn.css"><!-- theme -->
<link rel="stylesheet" href="/theme/twilight.css"><!-- theme -->
<link rel="stylesheet" href="/theme/vibrant-ink.css"><!-- theme -->
<link rel="stylesheet" href="/theme/xq-dark.css"><!-- theme -->
<link rel="stylesheet" href="/theme/xq-light.css"><!-- theme -->
<link rel="stylesheet" href="/theme/yeti.css"><!-- theme -->
<link rel="stylesheet" href="/theme/yonce.css"><!-- theme -->
<link rel="stylesheet" href="/theme/zenburn.css"><!-- theme -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SageMathCell</title>
<script src="https://sagecell.sagemath.org/static/embedded_sagecell.js"></script>
<script>
// Make the div with id 'mycell' a Sage cell
var sage1 = sagecell.makeSagecell({inputLocation: '#mycell',
template: sagecell.templates.minimal,
evalButtonText: '으아ㅏ아아아'});
// Make *any* div with class 'compute' a Sage cell
var sage2 = sagecell.makeSagecell({inputLocation: 'div.compute',
evalButtonText: 'Evaluate'});
var input = document.getElementById("change_theme");
$('#change_theme').on('change', function(){
if(this.value !== ""){
var optVal = $(this).find(":selected").val();
$.post('ajax.code.php',{optVal:optVal}, function(data) {
var date = $('.qqqq').val(data); // data는 ajaxPHP.php 파일에서 ehco 문의 결과 값
$('.CodeMirror').addClass(data);
$('.CodeMirror').removeClass('cm-s-default');
});
}
});
</script>
</head>
<body>
<h1>Embedded Sage Cells</h1>
<h2>Factorial</h2>
Click the “Activate” button below to calculate factorials.
<div id="mycell"><script type="text/x-sage">
@interact
def _(a=(1, 10)):
print(factorial(a))
</script>
</div>
<h2>Your own computations</h2>
Type your own Sage computation below and click “Evaluate”.
<div class="compute"><script type="text/x-sage">plot(sin(x), (x, 0, 2*pi))</script></div>
<div class="compute"><script type="text/x-sage">
@interact
def f(n=(0,10)):
print(2^n)
</script></div>
</body>
</html>
-------------------------------------
ajax.code.php
<?php
$ajax = $_REQUEST['optVal'];
echo $ajax;
?>
위 코드를 실행하면 원하는 클래스에 중첩이 되어 저장이 되어집니다.
제가 원하는건 셀렉트박스의 옵션을 고를 시 , 기존의 데이터는 지워지고 덮어질 수 있게 할려면 어떻게 해야 할 지 모르겠습니다..
답변 1
css 싹다 지우시고
<link rel="stylesheet" href="/theme/<?php echo $change_theme;?>.css">
$change_theme란 변수가 없는데 어떻게 적어야 하나요?
답변을 작성하시기 전에 로그인 해주세요.
