테스트 사이트 - 개발 중인 베타 버전입니다

셀렉트박스로 클래스추가 질문드립니다. 채택완료

서잰션 5년 전 조회 2,114

주소 :http://wnghks2516.cafe24.com/index2.php">http://wnghks2516.cafe24.com/index2.php

 

</p>

<p><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="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></a></p>

<p><!DOCTYPE HTML>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width">

    <title>SageMathCell</title>

    <script src="<a href="https://sagecell.sagemath.org/static/embedded_sagecell.js"></script>" target="_blank" rel="noopener noreferrer">https://sagecell.sagemath.org/static/embedded_sagecell.js"></script></a>

    <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');

            });

        }

    });</p>

<p>    </script>

  </head>

  <body>

  <h1>Embedded Sage Cells</h1></p>

<p>  <h2>Factorial</h2>

  Click the &ldquo;Activate&rdquo; 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 &ldquo;Evaluate&rdquo;.

    <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></p>

<p> </p>

<p>-------------------------------------</p>

<p>ajax.code.php</p>

<p><?php

       $ajax = $_REQUEST['optVal'];

       echo $ajax;

       ?></p>

<p>

 

 

위 코드를 실행하면 원하는 클래스에 중첩이 되어 저장이 되어집니다.

 

제가 원하는건 셀렉트박스의 옵션을 고를 시 , 기존의 데이터는 지워지고 덮어질 수 있게 할려면 어떻게 해야 할 지 모르겠습니다..

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

d
5년 전

 

  css 싹다 지우시고

 <link rel="stylesheet" href="/theme/<?php echo $change_theme;?>.css">

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

서잰션
5년 전
$change_theme란 변수가 없는데 어떻게 적어야 하나요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인